javascript - 如何仅在存在 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 和 typescript 的组合所致。 有没有办法监听事件以及 DOM 元素的存在，以防止 angular2 在不必要时被引导？

我会采用这种方法，因为我提供与 webpack 捆绑在一起的 javascript。

谢谢!

Answer 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");