看了angular官網hero教程中的動態元件一節,然後還看了一篇講的不錯的文章,結合自己的理解,總結angular動態元件載入如下:
首先我們抽象地考慮一下,動態元件載入需要哪些東西?首先你要載入的元件們應該定義出來,其次你需要乙個可以掛載這些動態元件的容器,並且要考慮怎麼把你的元件掛載到容器上。
定義元件很容易,我們這裡定義兩個最簡單的元件:
動態元件1:
import from '@angular/core';
@component()
export class dy1component implements oninit
ngoninit()
}
動態元件2:
import from '@angular/core';
@component()
export class dy2component implements oninit
ngoninit()
}
定義好的元件必須要在module裡的declarations和entrycomponents中宣告:\
@ngmodule()
angular中凡是要用到的元件都要在declarations中宣告這好理解,但是為什麼要在entrycomponents裡面也要去宣告呢?別忘了我們的元件是動態元件,這意味著angular根本不知道我們在執行時要載入哪些動態元件,所以angular在編譯階段不會為這些動態元件進行例項化,但是當執行時我們需要它的時候,angular得知道啊,這裡就告訴angular這些是動態元件,需要在執行的時候給我臨時建立。其實在entrycomponents裡宣告的元件,angular都會建立乙個工廠(componentfactory)並且儲存在componentfactoryresolver(相當於乙個工廠集合)中,然後在需要的時候由工廠去建立這些動態元件,後面會詳細說明。
然後我們就來看看怎麼去把這些動態元件掛載到檢視容器中。我們定義了乙個dynamiccomponent的元件如下:
@component()
export class dy1componentcomponent implements oninit ) dmroom: viewcontainerref;
currentindex: number = -1;
interval: any;
comps: any = [dy1component, dy2component];
constructor(private cfr: componentfactoryresolver)
addcomponent() , 1000);
} stopswitch()
ngoninit()
ngondestroy()
}
Angular動態載入元件
有時候需要根據url來渲染不同元件,我所指的是在同乙個url位址中根據引數的變化顯示不同的元件 這是利用angular動態載入元件完成的,同時也會設法讓這部分動態元件也支援aot。下面以乙個step元件為示例,完成乙個3個步驟的示例展示,並且可以通過urluser?step step one的變化顯...
Angular學習 模組和元件的動態載入
可以利用路由的loadchildren來動態載入angular模組和元件。1.建立乙個要動態載入的模組 包含相應的元件 dyn plugin.module.ts import from angular core import from angular common import from pfc p...
Angular中動態建立元件
通常來說元件不需要動態來建立,因為直接在模板中使用可以滿足大部分的需求。可是如果有這樣的需求 模板中存在多個元件是否顯示依賴特定的條件,那麼就需要定義多個bool型別的變數來控制,而且還需要考慮bool型別變數 的修改,這樣操作起來比較繁瑣。這個時候可以考慮使用動態建立元件的方式。大致流程如下所示。...