ViewContainerRef 是可以将一个或多个视图附加到组件的容器。
ViewContainerRef 可以将新的组件或模板插入到容器中。
可以使用以下两个方法插入组件或视图:
abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>; abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
示例:
import { Component, ViewContainerRef, TemplateRef, ViewChild, ComponentFactoryResolver } from '@angular/core'; @Component({ selector: 'view-test', template: ' <p> test works! </p>', }) export class TestComponent { } @Component ({ selector: 'view-container-test', template: ' <div class="view-container"> <button (click)="addTemplate()">click</button> <button (click)="addComponent()">add component</button> <span #span>这是html元素</span> </div> <ng-template #testTemplate> <div style="height:100px;background-color: red;"> <button (click)="closeTemplate()"">close</button> test template </div> </ng-template> ' }) export class ViewContainerComponent { @ViewChild('testTemplate') templateView: TemplateRef<any>; constructor( private viewContainer: ViewContainerRef, private cfr: ComponentFactoryResolver ) {} addTemplate() { // 使用 createEmbeddedView 将 templateView 插入到 viewContainer this.viewContainer.createEmbeddedView(this.templateView) } addComponent() { // 使用 createComponent 方法 将 component 插入到 viewContainer const componentFactory = this.cfr.resolveComponentFactory(TestComponent); this.viewContainer.createComponent(componentFactory); } closeTemplate() { // 清除 viewContainer 中添加的页面 this.viewContainer.clear(); } }
源码流程图:
当 inject ViewContainer 时的流程如下
当 createEmbeddedView 插入视图时的流程
当调用createComponent 方法插入组件时的流程