上一篇介绍了原生 API 的动静视图插入，性能上曾经能够满足大多数应用场景。不过也有一些缺憾，还没有解决在 Angular 利用外插入内容的需要，指令也不能跟动静插入的组件有输入输出的交互。这就到了 CDK（Component Dev Kit）出场的时候了

Angular 官网提供了一套组件开发套件 Component Dev Kit (CDK)，作为各种 Angular 组件开发的根底工具，其中就提供 “Portal（传送门）” 来辅助动静视图的创立。

这个 ”动静视图“ 能够是组件、TemplateRef 或者 DOM 元素，别离对应三种 Portal 类型（ComponentPortal、TemplatePortal、DomPortal）。它们三个的形象泛型基类是 Portal<T>，有三个办法：attach（挂载到容器）、detach（从容器移除）、isAttached（判断视图是否是挂载状态）。

而容器也是由一个抽象类 BasePortalOutlet 定义，和视图相似，蕴含 attach（给容器挂载视图）、detach（从容器移除视图）、dispose（销毁容器）、isAttached（是否有挂载视图）。它的次要实现是 DomPortalOutlet 类。用以挂载三种类型的动静视图。

创立动静内容

先来看看三种动静视图的创立。

ComponentPortal

相比原生 API，要创立一个动静组件十分的简略，只须要把组件类传入 ComponentPortal 构造函数即可。

this.componentPortal = new ComponentPortal(ExampleComponent);

能够传入任意自定义的组件类，用以创立 ComponentPortal 对象，再动静插入视图中。

✨留神：Angular 9 后的版本举荐应用 Ivy 编译器，如果是老版本编译器，传入的组件类，须要在 Module 的 entryComponents 中申明，并且这个 Module 不能懒加载。

TemplatePortal

TemplatePortal 的构建，相比组件，多了一个参数（ViewContainerRef）。看过前一篇应该对它十分相熟了，须要依赖它调用 createEmbeddedView() 来创立嵌入视图。这里通过结构注入，间接应用以后组件的 ViewContainerRef 实例。

<ng-template #testTemplate>  <p>一些须要动静插入的内容.</p></ng-template>
@ViewChild('testTemplate') templatePortalContent: TemplateRef<any>;constructor(private _viewContainerRef: ViewContainerRef) { }ngAfterViewInit() {  this.templatePortal = new TemplatePortal(    this.templatePortalContent,    this._viewContainerRef  );}

除了通过构造函数，TemplatePortal 也有一个指令（CdkPortal）能够便捷创立。

<ng-template cdkPortal>  <p>一些须要动静插入的内容.</p></ng-template><!-- 或写作 --><!-- 和下面写法是统一的成果 --><p *cdkPortal>  一些须要动静插入的内容.</p>

而后通过 @ViewChild 就能够取得 TemplatePortal 的实例了。

DomPortal

就像下面的示例通过 @ViewChild 获取 Template 实例来创立，相似的也能够获取 ElementRef 来创立动静的 DOM。

<div #domPortalContent><span>原生DOM内容</span></div>
@ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;ngAfterViewInit() {  this.domPortal = new DomPortal(this.domPortalContent);}

能够动静的将这段 DOM 转移到任意地位。要留神的是，转移之后，原来的数据绑定，或者绑定的指令可能不会再持续更新。

插入容器

后面三种类型的 Portal 都说了能够渲染到任意地位，那具体怎么渲染呢？

CdkPortOutlet

最简略的就是通过 CdkPortOutlet 指令了：

<div>  <ng-template [cdkPortalOutlet]="anyPortal"></ng-template></div>

给 anyPortal 传值下面三个中任意的 Portal 实例，都会动静渲染到以后地位。

和原生 API 的指令不同，它能够主动判断是什么类型的 Portal。另外，它还有个额定的事件：attached，通过这个事件，能够获取到挂载的组件实例，或者 TemplateRef。这也让和挂载组件的交互变得非常不便了。

结构容器实例

不过既然说了是能够渲染到任意地位，那天然也包含 Angular 利用内部，要渲染到利用之外，就须要咱们通过构造函数创立容器实例。

这个容器类就是 DomPortalOutlet，它是 PortalOutlet 的实现子类。它的结构参数次要是：Element（挂载视图的DOM节点）、ComponentFactoryResolver（和上篇一样，用以动静构建组件）、appRef（以后 Angular 利用的整体实例）、Injector（注入器，用于传递依赖）。

constructor(  private viewContainerRef: ViewContainerRef,  @Inject(DOCUMENT) private document: any,  private injector: Injector,  private componentFactoryResolver: ComponentFactoryResolver) {  // 在<body>下创立内部宿主元素  const container = this.document.createElement('div');  container.classList.add('outside-portal-container');  this.outsideContainer = this.document.body.appendChild(container);  // 获取利用实例  this.appRef = this.injector.get(ApplicationRef);  // 创立内部容器  this.outsideOutlet = new DomPortalOutlet(    this.outsideContainer,     this.componentFactoryResolver,     this.appRef,     this.injector  );}// 在利用内部插入动静组件。openComponentPortalOutSideAngularContext(): void {  const componentPortal = new ComponentPortal(AlertComponent);  const componentRef = this.outsideOutlet.attach(componentPortal);    componentRef.instance.closeAlert.subscribe(() => {      this.outsideOutlet.detach();    });}// 在利用内部插入动静模板。openTemplatePortalInsideAngularContext(): void {  const templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);  this.outsideOutlet.attach(templatePortal);}

除了挂载视图到利用外的 DOM 元素中，还须要可能跟视图进行数据交互，组件能够通过注入依赖，模板能够传入上下文对象。

const injectionToken = new InjectionToken<any>('Sharing data with outside component portal');const customInjector = Injector.create({ providers: [{ provide: CustomInjectionToken, useValue: 'test value' }] });

对创立 outsideContainer 的代码稍作批改，把这个 customInjector 作为参数传入（而不是应用以后组件的 injector）

// 重点是第四个参数new DomPortalOutlet(this.outsideContainer, this.componentFactoryResolver, this.appRef, customInjector);

相应的，这个组件只须要按这个 injectionToken 注入依赖即可：

constructor(@Inject(injectionToken) public customData: any) {}

给模板传递上下文就比较简单了，在创立 TemplatePortal 对象时，传入上下文对象即可：

// 重点是第三个参数new TemplatePortal(this.templatePortalContent, this.viewContainerRef, { customData:'test values' });

总结

相比原生 API，CDK portal 次要实现了：

  1. 动静插入视图到利用内部的能力；
  2. 和插入到内部的视图数据交互的能力；
  3. 更加便捷和灵便的指令。

有了它，创立动静的组件容器，或者弹窗，浮动菜单，甚至是搭建一个低代码设计平台，都变得更加容易了。

我的项目源码
在线示例