javascript - 如何仅在 DOM 元素存在时加载 Angular2 应用

我在我的 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 和 TypeScript 的组合。有没有一种方法可以监听事件，同时监听 DOM 元素的存在，以防止在不必要时启动 Angular2？

我会选择这种方法，因为我提供的是通过 webpack 打包的 JavaScript。

谢谢！

答案＃1

尝试 console.log(document.getElementById("my-app-selector"))，看看当选择器存在或不存在时返回什么。然后根据你可能或不可能预期的结果来构建你的 if 语句：

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

或者（在 TypeScript 中使用 let 而不是 var）

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

答案＃2

如果你正在使用 webpack，那么只需在选择器标签后添加你的捆绑文件即可。

错误 my-app 选择器未找到

 <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>