Question

我需要使用组件my-app初始化一个角度应用程序，问题是该组件存在于未在页面启动时加载的html模板上，因此我必须手动初始化，否则它会显示此消息时出错：错误：选择器“my-app”与任何元素都不匹配

这可能吗？

Answer 1

如果您正在使用SystemJS，则可以使用document.createElement()动态创建元素，然后使用appendChild()追加，然后调用System.import()初始化应用。这假设已经加载了所有必需的应用程序资产和SystemJS配置：

<强> HTML

<body>
  <div id="app"></div>

  <button type="button" id="foo">Click Me</button>

  <script src="app.js"></script>
</body>

<强> JS

(function() {
  var button = document.getElementById('foo');
  var container = document.getElementById('app');

  button.addEventListener('click', function() {
    var myApp = document.createElement('my-app');
    myApp.textContent = 'Loading...';

    container.appendChild(myApp);

    System.import('app')
      .catch(console.error.bind(console));
  });
})();

这是展示功能的plunker。 app元素是在按钮单击的事件处理程序中创建，追加和初始化的。

更新如果您正在使用Webpack，并且根据您的构建/捆绑过程，您可以使用此question中的模式动态加载主要的transpiled / bundle JS文件，以避免错误。如果您使用@angular/cli，这可能会更加困难，因为生成的文件具有main.97e5159ded9c783f627a.bundle.js等标识符。

希望这有帮助！

Answer 2

以下是如何做到这一点。首先创建一个根应用程序模块，并在declarations和entryComponents中声明您的根组件。不要将其添加到bootstrap组件。然后在模块类上定义ngDoBootstrap方法，让Angular知道你将自己引导应用程序。在此方法中获取对ApplicationRef的引用，然后在时间到来时，只需在其上调用bootstrap，即可传递AppComponent类引用。这是代码：

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  entryComponents: [AppComponent]
})
export class AppModule {
  ngDoBootstrap(app: ApplicationRef) {
    // delay bootstrap by 3 seconds
    setTimeout(() => {
      app.bootstrap(AppComponent)
    }, 3000);
  }
}

基本上，当您使用bootstrapModule(AppModule);指定boostrapComponents时，这就是Angular所做的事情。

阅读How to manually bootstrap an Angular application了解详情。

如何手动初始化角度2/4应用程序

2 个答案: