Question

我正在使用@ angular / cdk / overlay，试图为我的应用程序创建一个不错的模态系统。

我自己进行了第一次尝试，但由于覆盖层关闭的方式而感到失望。由于这是我第一次真正使用CDK，所以我认为可能是做错了事，所以我决定遵循this post。

我不满意的是OverlayRef如何关闭。首先，组件被破坏，然后，大约一秒钟的时间，覆盖层消失。它提供了非常不稳定的故障体验，不是我希望看到的。

@Injectable({
  providedIn: 'root',
})
export class ModalService {

  constructor(
    private overlay: Overlay,
  ) { }

  open(config: FilePreviewDialogConfig = {}) {
    // Returns an OverlayRef (which is a PortalHost)
    const dialogConfig = { ...DEFAULT_CONFIG, ...config };
    const overlayRef = this.createOverlay(dialogConfig);
    const dialogRef = new ModalOverlayRef(overlayRef);

    overlayRef.attach(new ComponentPortal(MyFormComponent));
    return dialogRef;
  }

  private getOverlayConfig(config: FilePreviewDialogConfig): OverlayConfig {
    const positionStrategy = this.overlay.position()
      .global()
      .centerHorizontally()
      .centerVertically();

    return new OverlayConfig({
      hasBackdrop: config.hasBackdrop,
      backdropClass: config.backdropClass,
      panelClass: config.panelClass,
      scrollStrategy: this.overlay.scrollStrategies.block(),
      positionStrategy
    });
  }

  private createOverlay(config: FilePreviewDialogConfig) {
    const overlayConfig = this.getOverlayConfig(config);
    return this.overlay.create(overlayConfig);
  }
}

用法：

showModal() {
  const dialogRef: ModalOverlayRef = this.ms.open();

  setTimeout(() => {
    dialogRef.close();
  }, 2000);
}

Angular CDK OverlayRef不能顺利关闭

0 个答案: