angular - 如何从componentPortal实例中关闭 Material 覆盖

Question

我必须手动传递overlayRef，有没有更好的方法将它包含在带有DI的组件构造函数中？

服务代码:

display() {
    const overlayRef = this.overlay.create({
      positionStrategy: this.overlay.position().global().top(),
    });
    const portal = new ComponentPortal(ErrorsListBottomSheetComponent);
    this.ref = overlayRef.attach<ErrorsListBottomSheetComponent>(portal);
    this.ref.instance.overlayRef = overlayRef;
    overlayRef.backdropClick().subscribe(() => {
      overlayRef.detach();
    });

  }

组件代码:

export class ErrorsListBottomSheetComponent implements OnInit {
  overlayRef: OverlayRef; -- REMOVE THIS--

  constructor(
-- ADD SOMETHING HERE --
  ) {}

close() {
    if (this.overlayRef) {
      this.overlayRef.detach();
    }
  }

更好的是，是否有类似的叠加

<button mat-dialog-close>close</button>

代替

<button (click)="close()">close</button>

Answer 1

您可以使用@Ouput 事件发射器从组件发出事件，然后在服务中订阅它。

组件代码:

export class ErrorsListBottomSheetComponent implements OnInit {
  @Output() closePanel = new EventEmitter<void>();

  ...

  close() {
    this.closePanel.emit();
  }
}

服务代码:

display() {
   ...
   this.ref = overlayRef.attach<ErrorsListBottomSheetComponent>(portal);
   this.ref.instance.closePanel.subscribe(() => overlayRef.detach());
}

html代码:

<button (click)="close()">Close</button>