传递参数构造动态组件 angular 【overlay angular cdk】【注入器 Injector injectiontoken】

需求：

点击组件dashboard的按钮openProtocolMenu()，打开名为child的overlay组件。

同时我们想从dashboard组件传递变量给child组件，来动态显示 overlay 的C组件。

点击child组件上的onClose按钮，可以调用dashboard组件的方法detach()来关闭overlay。

下面这个是dashboard.ts：

// 动态变化的参数：dataToPass
  // createInjector(dataToPass: any): PortalInjector {
  //   const injectionTokens = new WeakMap().set(SvgToken, dataToPass);
  //   return new PortalInjector(this.injector, injectionTokens);
  // }

  openProtocolMenu() {
    if (this.useOverLay) {
      const positionStrategy = this.overlay
        .position()
        // .flexibleConnectedTo(this.el);
        .global()
        .left(`${this.leftPixelsToWindow}px`)
        .bottom(`${this.bottomPixelsToWindow}px`);
      const overlayRef = this.overlay.create({
        // 创建 overlay
        positionStrategy,
        hasBackdrop: true
        // backdropClass: 'overlay-class'
      });
      const injectionTokens = new WeakMap().set(SvgToken, ''); // 传递参数
      const userProfilePortal = new ComponentPortal( // 创建 ComponentPortal
        ProtocolMenuComponent,
        null,
        // this.createInjector('assets/icon/downAdd.svg')
        new PortalInjector(this.injector, injectionTokens)
      );
      // console.log('test ', c.instance.pictureSource); // 可以获取到值
      const c = overlayRef.attach(userProfilePortal); // 把 ComponentPortal 添加到 overlay 上
 overlayRef.backdropClick().subscribe(
        () => overlayRef.detach(),
        e => console.error(e)
      );
 c.instance.close.asObservable().subscribe(
        () => overlayRef.detach(),
        e => console.error(e)
      );   // 这个close方法在child组件里
}
// subscribe 了记得取消订阅

下面这个是child组件：

@Output() close = new EventEmitter<void>(); 
 onClose() {
    this.close.emit();
  }

//这样就能在dashboard的c实例里获取到这个方法了。

---

 需求：

多个组件复用同一个overlay的child组件

---

马克：https://www.cnblogs.com/worktile/p/10559311.html