Подтвердите сообщение перед тем, как случайно закрыть диалог материалов в Angular? - PullRequest
Новая
       38

Подтвердите сообщение перед тем, как случайно закрыть диалог материалов в Angular?

0 голосов
/ 27 ноября 2018

Как я могу использовать метод beforeClose () для отображения подтверждающего сообщения перед закрытием диалогового окна материала? 

this.dialogRef.beforeClose().subscribe(result => {
      var cn = confirm('You have begun editing fields for this user. 
                        Do you want to leave without finishing?')
      console.log(cn);

    })

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Как вам нужно window.confirm для следующих вещей:

  • , если пользователь нажал кнопку обновления, или
  • щелкните за пределами диалогового окна

В соответствии с ссылочной ссылкой в комментариях
я реализовал Stackblitz Demo , который использует @HostListener
код для esc и refresh: 

@HostListener('window:keyup.esc') onKeyUp() {
    let cn = confirm('Sure ?')
    if (cn) {
      this.dialogRef.close();
    }
  }

@HostListener("window:beforeunload", ["$event"]) unloadHandler(event: Event) {
      console.log('event:', event);
      event.returnValue = false;
}

И в ConfirmationDialog компоненте, ручка backDropClick() как 

ngOnInit() {
  this.dialogRef.disableClose = true;
  this.dialogRef.backdropClick().subscribe(_ => {
    let cn = confirm('Sure ?')
    if (cn) {
      this.dialogRef.close();
    }
  })
}

Код заявки: https://stackblitz.com/edit/dialog-example-beforeclose?file=app%2Fapp.component.ts

0 голосов
/ 27 ноября 2018

Вы можете запретить закрывать dialog от нажатия outside или esc, используя disableClose: true

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      scrollStrategy: this.overlay.scrollStrategies.close(),
      disableClose: true //for diabled close dialog
    });

Вы можете использовать confirmation диалог сследующий код: 

 onNoClick(): void {
      var cn = confirm('You have begun editing fields for this user. Do you want to leave without finishing?');
       console.log(cn);
       if(cn){

    this.dialogRef.close();
       }
  };
  onOKClick(): void {
      var cn = confirm('You have begun editing fields for this user. Do you want to leave without finishing?');
       console.log(cn);
       if(cn){

    this.dialogRef.close();
       }
  };

HTML код: 

<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button (click)="onOKClick()" cdkFocusInitial>Ok</button>
</div>

ссылка Ссылка: ссылка1 , ссылка2

...