如何動態加載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