Angular中的動態元件載入

2021-09-14 05:47:05 字數 1433 閱讀 7648

看了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型別變數 的修改,這樣操作起來比較繁瑣。這個時候可以考慮使用動態建立元件的方式。大致流程如下所示。...