如何动态加载Angular2根组件

Question

我有一个要求，我必须动态地/使用setTimeout（）将根组件加载到angular2中。 是可能的，以及如何。 例如

<body>
 <hello-world>Loading...</hello-world>
</body>

我希望在页面加载几秒钟后追加“ hello-world ”。 由于我无法在页面加载中包含自定义组件。

plnkr会有所帮助。

Answer 1

您可以在索引页面上添加事件，并在main.ts角度文件中侦听此事件。

index.html：

...  
<body>
    <my-app>Loading...</my-app>

    <script>
      setTimeout(function() {
          document.dispatchEvent(new Event('startNgLoad'))
      }, 5000)
    </script>
  </body>
...

main.ts：

document.addEventListener('startNgLoad', () => {
  platform.bootstrapModule(AppModule);
})

Answer 2

您可以在main.ts中的setTimeout中加载根模块

setTimeout(function() {
  platformBrowserDynamic().bootstrapModule(AppModule);
},1000)

如何动态加载Angular2根组件

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-09-22 11:50:15

解决方案2
0 2016-09-22 12:06:52

如何动态加载Angular2根组件

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-09-22 11:50:15

解决方案2 0 2016-09-22 12:06:52

解决方案1
1 已采纳 2016-09-22 11:50:15

解决方案2
0 2016-09-22 12:06:52