Angular動態組件的示例分析

這篇文章主要介紹了Angular動態組件的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用場景

我們先明確下動態組件的使用場景，在代碼運行時要動態加載組件，換成普通人話，代碼需要根據具體情況（比如用戶的操作，向后臺請求結果）確定在某些地方加載某些組件，這些組件不是靜態的（不是固定的）。

官網的舉例就是，構建動態廣告條，廣告組件不斷會推出新的，再用只支持靜態組件結構的模板顯然是不現實的。

再舉一個常見的例子，動態彈出框，彈出的組件是不確定的、不斷更新的，這里那里彈出個購買框，那那那又需要彈出樣式選擇框，靜態組件結構模板是不能滿足群眾日漸增長的需求。

怎么實現

然后我們來找個把手，看實現動態組件需要什么。

一、動態組件放在哪

我們需要知道把動態組件加在哪里，也就是錨點。那什么東西可以用來加載組件呢？

你可能會想說，組件不就加載錨點上嗎，錨點不就是DOM節點嗎？那當然是加載DOM節點里啊。

我們先來回顧下Angular操作DOM的常見方法，原生JS操作DOM的方法你就不要想了，你覺得它能返回給你能加載Angular組件的對象嗎？

Angular 提供了一種叫做 DOM Query 的技術，主要來源于 @ViewChild 和 @ViewChildren 裝飾器（decorators），兩者基本功能相同 。

@ViewChild： 返回單個引用，在視圖的 DOM 中查找能匹配上該選擇器的第一個元素或指令。

@ViewChildren ：返回由 QueryList 對象包裝好的多個引用，在視圖的 DOM 中查找能匹配上該選擇器的所有元素或指令。

基本語法：

@ViewChild([reference from template], {read: [reference type]});

DOM Query 的技術查找出來的對象分為三類：

ElementRef：如果它掛載的是類似 span 的簡單 html 元素；

TemplateRef: 如果它掛載的是 template 元素；

ViewContainerRef: 無法推斷，一般要程序員要在read中指明，任何DOM元素都可以被用作為視圖容器。

我們通過官網查詢API可以看到只有ViewContainerRef才是可以將一個或多個視圖附著到組件中的容器，也就是只有它才可以加載組件。不過要注意的是，它是一個可以將新的組件作為其兄弟（節點）的DOM元素（容器），是兄弟，不是父子額。

好的，我們確定了使用ViewContainerRef來加載容器，獲取ViewContainerRef有兩種方式：

第一種就是上面的通過DOM Query查詢@ViewChild獲取

<ng-container #addComp></ng-container>
@ViewChild('addComp', {read: ViewContainerRef}) adComp:ViewContainerRef;

第二種就是官網里的例子，用依賴注入

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
selector: '[ad-host]',
})
export class AdDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}

錨點設置ng-template上，通過指令注入獲取ViewContainerRef

template: `
<div class="ad-banner-example">
<h4>Advertisements</h4>
<ng-template ad-host></ng-template>
</div>

二、怎么獲取組件的實例

組件加載到視圖中去，不是簡單一個new就實例化，再append、insert之類就能附加上去的就可以的。動態組件需要編譯器事先編譯存放好起來，再以ComponentFactory封裝起來，之后的Component實例要通過ComponentFactory 來創建。大家可以看下這篇文章[譯] 關于 Angular 動態組件你需要知道的，不過它提及的使用 SystemJsNgModuleLoader 模塊加載器已經被淘汰了。

ComponentFactoryResolver一個簡單的注冊表，映射Components到ComponentFactory可用于創建組件實例的生成的類。它可用于獲取給定組件類型的工廠，然后使用工廠的create()方法創建該類型的組件。

我們來看下官網實例代碼，以下不是完整代碼

//注入ComponentFactoryResolver
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
 
loadComponent() {
......
// 拿到可用于創建廣告組件實例的生成的ComponentFactory
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
 
//獲取加載組件的容器
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
 
// 把組件放到容器里，再傳一些參數給它
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AdComponent>componentRef.instance).data = adItem.data;
}

你以為這就完了，你以為這樣寫出的代碼就能運行嗎？太年輕，讓前浪來給你說一下要注意的幾個點：

Angular 中的組件、指令、管道都是是被封裝在模塊中，以組件為例，如果要使用其別的模塊組件，必須別的模塊有export這個組件，而且你在自己模塊也要import其他模塊。所以官網例子的指令記得導入導出。

如果是動態組件，必須把組件注冊在模塊中 entryComponents 屬性，但是就不用了export，import模塊還是需要的。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Angular動態組件的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!