Angular中動態建立元件

2021-09-13 12:13:07 字數 1099 閱讀 8591

通常來說元件不需要動態來建立,因為直接在模板中使用可以滿足大部分的需求。可是如果有這樣的需求

模板中存在多個元件是否顯示依賴特定的條件,那麼就需要定義多個bool型別的變數來控制,而且還需要考慮bool型別變數

的修改,這樣操作起來比較繁瑣。這個時候可以考慮使用動態建立元件的方式。大致流程如下所示。

@component()

export class dynamiccomponent

@component()

@viewchild("dynamiccontainer", ) container: viewcontainerref;

}

在建立元件之前,需要注入componentfactoryresolver服務物件,該服務是動態載入元件的核心,可以將乙個元件例項呈現到另乙個

元件檢視上。

//依賴元件型別獲取對應的factory,從名字上可以看出該factory是用來初始化元件的

const componentfactory = this.componentfactoryresolver(dynamiccomponent);

//呼叫檢視容器的createcomponent方法並將元件新增到容器上。該方法內部會呼叫factory的create方法來初始化元件。

const modalcontainerref = this.container.createcomponent(componentfactory);

通過如下的方式為元件屬性進行賦值

modalcontainerref.instance.property = ***;
在使用元件後,記得要銷毀元件。

modalcontainerref.destroy();

為了能夠動態建立元件需要將元件在模組的entrycomponents中宣告。因為在entrycomponents中宣告的元件angular都會建立乙個

componentfactory並將其儲存在componentfactoryresolver中,這是動態載入必需的步驟。

angular 4.x 動態建立元件

Angular中的動態元件載入

看了angular官網hero教程中的動態元件一節,然後還看了一篇講的不錯的文章,結合自己的理解,總結angular動態元件載入如下 首先我們抽象地考慮一下,動態元件載入需要哪些東西?首先你要載入的元件們應該定義出來,其次你需要乙個可以掛載這些動態元件的容器,並且要考慮怎麼把你的元件掛載到容器上。定...

Angular動態載入元件

有時候需要根據url來渲染不同元件,我所指的是在同乙個url位址中根據引數的變化顯示不同的元件 這是利用angular動態載入元件完成的,同時也會設法讓這部分動態元件也支援aot。下面以乙個step元件為示例,完成乙個3個步驟的示例展示,並且可以通過urluser?step step one的變化顯...

angular 動態元件型別

出處 元件型別1 純函式功能,而沒有檢視部分,即factory 類似於 http 元件型別2 不是常駐於檢視,而是動態插入的 有ui的一類元件,有輸入互動 不常被呼叫 類似於model對話方塊 元件型別3 不常駐於檢視,但會被經常呼叫,而且是動態插入的 無輸入互動 有ui的一類元件 類似於popov...