Angular进阶之三：ViewContainerRef

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 方法插入组件时的流程