Диалоговое окно автоматического закрытия Angular через x секунд

Question

У меня есть диалог angular с приветственным сообщением. Я хотел бы автоматически закрыть это диалоговое окно через 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();
  }

}

Answer 2

Для Boostrap Modal , вы должны сначала получить ссылку на модальное значение viewchild.

@ViewChild('closeModal') closeModal: ElementRef


@Component({
  ...
})
export class myComponent extends myModal {

  @ViewChild('closeModal') closeModal: ElementRef

  ...

}

Когда вам нужно закрыть модальное, просто позвоните: this.closeModal.nativeElement.click()

Например:

public googleLogin(content): void {
   this.auth.authenticateUser().then((res: any) => {
      setTimeOut(()=>{
         // close the modal in this moment.
         this.closeModal.nativeElement.click() //<-- here

         const user = res.user;
         this.router.navigate(['/gallery']);
      },8000);
   });
}

В вашем html добавьте #closeModal к кнопке:

<button #closeModal type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
</button>

Узнайте больше о bootstrap modal здесь .

Material Design : вам придется использовать сервис диалога материалов, который вы добавили в свой компонент.

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

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

onDialogOpen(): void {
  let dialogRef = this.dialog.open(Dialog);

  setTimeout(() => {
     dialogRef.close();
  }, 80000) ==========> set time here 
}

Узнать подробнее о материале angular модал здесь .