如何僅在存在DOM元素時加載Angular2應用

Question

我的main.ts文件（應用程序的引導文件）上有以下這段代碼，它們運行良好：

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。

謝謝！

Answer 1

嘗試console.log(document.getElementById("my-app-selector"))並查看選擇器存在與否時返回的內容。 然后根據您可能會或可能不會期望的內容構建if語句：

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

或者（在打字稿中使用let not var ）

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

Answer 2

您正在使用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>

如何僅在存在DOM元素時加載Angular2應用

問題描述

2 個解決方案

解決方案1
3 已采納 2016-11-12 20:25:01

解決方案2
1 2016-11-12 20:35:33

如何僅在存在DOM元素時加載Angular2應用

問題描述

2 個解決方案

解決方案1 3 已采納 2016-11-12 20:25:01

解決方案2 1 2016-11-12 20:35:33

解決方案1
3 已采納 2016-11-12 20:25:01

解決方案2
1 2016-11-12 20:35:33