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

电玩女神 2023-06-13 09:19 14阅读 0赞

**需求：**

**点击组件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][https_www.cnblogs.com_worktile_p_10559311.html]

[https_www.cnblogs.com_worktile_p_10559311.html]: https://www.cnblogs.com/worktile/p/10559311.html