x 秒后自动关闭 Angular 对话框

Question

我有一个带有欢迎消息的角度对话框。我想在 x 秒（3-5 秒）后自动关闭此对话框。有人可以向我指出如何做到这一点的解决方案、文章或文档吗？

非常感谢，皮特

Answer 1

如果您使用的是由服务创建的材质对话框 MatDialogRef<T>对象，则MatDialog具有close功能。

这是一个非常简单的例子。

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'content',
  template: '<button mat-raised-button (click)="openDialog()">Open dialog</button>',
  styles: [''],
})
export class Content {

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const timeout = 3000;
    const dialogRef = this.dialog.open(Dialog, {
      width: '300px',
      data: {}
    });

    dialogRef.afterOpened().subscribe(_ => {
      setTimeout(() => {
         dialogRef.close();
      }, timeout)
    })
  }
}

@Component({
  selector: 'dialog',
  template: `
<div>
   Dialog
</div>
<div mat-dialog-actions>
  <button mat-button (click)="closeDialog()">Close</button>
</div>`,
})
export class Dialog {

  constructor(
    public dialogRef: MatDialogRef<Dialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  closeDialog(): void {
    this.dialogRef.close();
  }

}