2019獨角獸企業重金招聘Python工程師標準>>>

動態創建組件的應用場景很多，比如動態廣告、像瀏覽器一樣動態打開多個頁面等等等等

要動態創建組件主要需要用到angular中的ComponentFactoryResolver、ComponentFactory、ViewContainerRef、?ComponentRef這幾個類

class ComponentFactoryResolver {static NULL: ComponentFactoryResolverresolveComponentFactory<T>(component: Type<T>): ComponentFactory<T> } class ViewContainerRef {get element(): ElementRefget injector(): Injectorget parentInjector(): Injectorclear(): voidget(index: number): ViewRef|nullget length(): numbercreateEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>insert(viewRef: ViewRef, index?: number): ViewRefmove(viewRef: ViewRef, currentIndex: number): ViewRefindexOf(viewRef: ViewRef): numberremove(index?: number): voiddetach(index?: number): ViewRef|null } class ComponentRef<C> {get location(): ElementRefget injector(): Injectorget instance(): Cget hostView(): ViewRefget changeDetectorRef(): ChangeDetectorRefget componentType(): Type<any>destroy(): voidonDestroy(callback: Function): void }

假設我們要在組件A中動態創建組件B，那么我們一般會這樣做：

1、在組件A中設置一個<ng-template>，并在組件類中獲取它。

2、在組件A中導入組件B，導入上面說的那幾個類

3、在組件A中動態創建組件B的方法里使用ComponentFactoryResolver的resolveComponentFactory方法解析組件B獲得組件B的ComponentFactory，balabalabala...具體如下

4、在所在模塊中導入entryComponents: [BComponent]

@NgModule({...declarations: [...,BComponent],entryComponents: [BComponent] }) import { Component, OnInit, ViewChild, ComponentRef, ComponentFactory,ComponentFactoryResolver, ViewContainerRef } from '@angular/core';import { BComponent } from '../b/b.component';@Component({selector: 'app-article',template: `<ng-template #RefB></ng-template><button (click)="createComponent()">create</button> ` }) export class ArticleComponent implements OnInit {@ViewChild('RefB', { read: ViewContainerRef }) container: ViewContainerRef;constructor(private componentFactoryResolver: ComponentFactoryResolver) { }ngOnInit() {}createComponent() {const componentFactory: ComponentFactory<BComponent> = this.componentFactoryResolver.resolveComponentFactory(BComponent);const componentRef: ComponentRef<BComponent> = this.container.createComponent(componentFactory);}}

至此我們完成了對組件B的基本動態創建方法，我們還可以通過componentRef的instance方法來訪問組件B中的屬性和方法；

但是當我們不僅僅是希望能動態創建，同時還想要能讓動態創建出的組件B能和組件A進行通訊，就需要使用@Input、@Output。這與平時我們所使用的過程有一點區別，因為動態創建出的組件無法綁定屬性，則需要在父組件A通過訂閱才能實現通訊。

//input componentRef.instance.type = type; //output componentRef.instance.output.subscribe(event => console.log(event));

以前做過一個很復雜的的動態創建的組件交互中的Input需要使用Subject訂閱才能實現的，記不清楚了具體是什么場景了，用來作甚么的了

轉載于:https://my.oschina.net/u/3412211/blog/1550642

總結

以上是生活随笔為你收集整理的Angular组件--动态组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。