如何，只有當一個DOM元素存在

我有這樣的代碼，這是可以正常使用，我main.ts文件（用於應用程序的引導文件）加載Angular2應用：如何，只有當一個DOM元素存在

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

但我只是想引導應用程序時的主要選擇是存在的（因爲如果沒有它提出了選擇的經典錯誤未找到），所以我想類似下面的代碼將工作：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

document.addEventListener('DOMContentLoaded', function() { 
    var shouldBootstrap = document.getElementById("my-app-selector"); 
    if (shouldBootstrap) { 
    platformBrowserDynamic().bootstrapModule(AppModule); 
    } 
});

遺憾的是它不工作，我想這是由於JavaScript和打字稿的組合。有沒有辦法監聽一個事件，還有一個DOM元素的存在，以防止angular2在沒有必要時被引導？

我會去這個方法，因爲我服務與webpack捆綁在一起的JavaScript。

謝謝！

來源

2016-11-12 Rubén_ic

檢查引導程序功能https://github.com/AngularClass/angular2-hmr/blob/master/src/helpers。 ts – yurzui

嘗試console.log(document.getElementById("my-app-selector"))並查看選擇器是否存在時返回的內容。然後建立你的，如果你可能會或可能不會想到什麼聲明：

if (document.getElementById("my-app-selector") !== undefined){ 
    platformBrowserDynamic().bootstrapModule(AppModule); 
}

或（使用let不var在打字稿）

let shouldBootstrap = document.getElementById("my-app-selector");

來源

2016-11-12 20:25:01

非常感謝！「讓」做了工作！ –

您正在使用的WebPack然後只需添加你的包文件選擇標籤後。

錯誤我的應用程序內選擇沒有發現

<body> 
<script src="../dist/app.bundle.js"></script> 
<my-app>Loading...</my-app> 
</body>

工作

<body> 
<my-app>Loading...</my-app> 
<script src="../dist/app.bundle.js"></script> 
</body>

來源

2016-11-12 20:35:33

如何，只有當一個DOM元素存在

回答

相關問題