Angular中的動態元件載入

看了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中的動態元件載入

Angular動態載入元件

Angular學習模組和元件的動態載入

Angular中動態建立元件

Angular中的動態元件載入

Angular動態載入元件

Angular學習 模組和元件的動態載入

Angular中動態建立元件

相關推薦

Angular學習模組和元件的動態載入