仅当存在 DOM 元素时如何加载 Angular2 应用程序答案

【问题标题】：How to load an Angular2 app only when a DOM element is present仅当存在 DOM 元素时如何加载 Angular2 应用程序
【发布时间】：2017-03-26 19:39:24
【问题描述】：

我的 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。

谢谢！

【问题讨论】：

检查引导加载程序功能github.com/AngularClass/angular2-hmr/blob/master/src/helpers.ts

标签： javascript angularjs angular typescript webpack

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试console.log(document.getElementById("my-app-selector"))并查看选择器存在或不存在时返回的内容。然后根据您可能期望或可能不期望的内容构建您的 if 语句：

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

或者（在打字稿中使用let 而不是var）

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

【讨论】：