Question

我的main.ts文件（应用程序的bootstrap文件）上有这个完美的代码：

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而不是var）

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

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

如何在存在DOM元素时加载Angular2应用程序

2 个答案: