Saat ini saya sedang mengerjakan halaman pengaturan ulang kata sandi dari proyek Angular 4. Kami menggunakan Angular Material untuk membuat dialog, namun, saat klien mengklik dialog, dialog akan ditutup secara otomatis. Apakah ada cara untuk menghindari dialog tutup sampai fungsi "tutup" panggilan sisi kode kita? Atau bagaimana cara membuat modal yang tidak dapat ditutup ?

Ada dua cara untuk melakukannya.

1. Dalam metode yang membuka dialog, teruskan opsi konfigurasi berikut disableClosesebagai parameter kedua MatDialog#open()dan setel ke true:

   export class AppComponent {
     constructor(private dialog: MatDialog){}
     openDialog() {
       this.dialog.open(DialogComponent, { disableClose: true });
     }
   }
   

2. Cara lainnya, lakukan di komponen dialog itu sendiri.

   export class DialogComponent {
     constructor(private dialogRef: MatDialogRef<DialogComponent>){
       dialogRef.disableClose = true;
     }
   }
   

Inilah yang Anda cari:

Dan inilah demo Stackblitz

Kasus penggunaan lainnya

Berikut beberapa kasus penggunaan dan cuplikan kode lain tentang cara menerapkannya.

Izinkan escuntuk menutup dialog tetapi jangan izinkan mengklik latar belakang untuk menutup dialog

Seperti yang dikatakan @MarcBrazeau dalam komentar di bawah jawaban saya, Anda dapat mengizinkan esckunci untuk menutup modal tetapi tetap melarang mengklik di luar modal. Gunakan kode ini pada komponen dialog Anda:

import { Component, OnInit, HostListener } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
  selector: 'app-third-dialog',
  templateUrl: './third-dialog.component.html'
})
export class ThirdDialogComponent {
  constructor(private dialogRef: MatDialogRef<ThirdDialogComponent>) {      
}
  @HostListener('window:keyup.esc') onKeyUp() {
    this.dialogRef.close();
  }

}

Cegah escdari menutup dialog tapi izinkan klik pada backdrop untuk menutup

PS Ini adalah jawaban yang berasal dari jawaban ini , di mana demo didasarkan pada jawaban ini.

Untuk mencegah esckunci menutup dialog tetapi mengizinkan klik pada latar belakang untuk menutup, saya telah mengadaptasi jawaban Marc, serta menggunakan MatDialogRef#backdropClickuntuk mendengarkan peristiwa klik ke latar belakang.

Awalnya, dialog akan disableClosemenetapkan opsi konfigurasi sebagai true. Ini memastikan bahwa escpenekanan tombol, serta mengklik latar belakang tidak akan menyebabkan dialog ditutup.

Setelah itu, berlangganan ke MatDialogRef#backdropClickmetode (yang memancar saat latar belakang diklik dan kembali sebagai a MouseEvent).

Bagaimanapun, pembicaraan teknis yang cukup. Berikut kodenya:

openDialog() {
  let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
  /*
     Subscribe to events emitted when the backdrop is clicked
     NOTE: Since we won't actually be using the `MouseEvent` event, we'll just use an underscore here
     See https://stackoverflow.com/a/41086381 for more info
  */
  dialogRef.backdropClick().subscribe(() => {
    // Close the dialog
    dialogRef.close();
  })

  // ...
}

Alternatifnya, ini bisa dilakukan di komponen dialog:

export class DialogComponent {
  constructor(private dialogRef: MatDialogRef<DialogComponent>) {
    dialogRef.disableClose = true;
    /*
      Subscribe to events emitted when the backdrop is clicked
      NOTE: Since we won't actually be using the `MouseEvent` event, we'll just use an underscore here
      See https://stackoverflow.com/a/41086381 for more info
    */
    dialogRef.backdropClick().subscribe(() => {
      // Close the dialog
      dialogRef.close();
    })
  }
}

Bagaimana kalau bermain dengan dua properti ini?

disableClose: boolean - Apakah pengguna dapat menggunakan escape atau mengklik latar belakang untuk menutup modal.

hasBackdrop: boolean - Apakah dialog memiliki latar belakang.

https://material.angular.io/components/dialog/api

Menambahkan

[config]="{backdrop: 'static'}"

ke kode model.