Question

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

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

我想在页面加载几秒后附加' hello-world '。因为我无法在页面加载中使用自定义组件。

一个plnkr会有所帮助。

Answer 1

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

的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 个答案: