如何使用AngularCDKPortal创建动态内容

this.componentPortal = new ComponentPortal(ExampleComponent);

  
一些需要动态插入的内容.

@ViewChild('testTemplate') templatePortalContent: TemplateRef;

constructor(private _viewContainerRef: ViewContainerRef) { }

ngAfterViewInit() {
  this.templatePortal = new TemplatePortal(
    this.templatePortalContent,
    this._viewContainerRef
  );
}

  
一些需要动态插入的内容.






  一些需要动态插入的内容.

原生DOM内容

@ViewChild('domPortalContent') domPortalContent: ElementRef;
ngAfterViewInit() {
  this.domPortal = new DomPortal(this.domPortalContent);
}

可以动态的将这段 DOM 转移到任意位置。要注意的是，转移之后，原来的数据绑定，或者绑定的指令可能不会再继续更新。

插入容器

前面三种类型的 Portal 都说了可以渲染到任意位置，那具体怎么渲染呢？

CdkPortOutlet

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

给 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
) {
  // 在下创建外部宿主元素
  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('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' });

关于“如何使用Angular CDK Portal创建动态内容”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。