Nonaktifkan klik di luar area dialog material sudut untuk menutup dialog (Dengan Versi Angular 4.0+)


108

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 ?

Jawaban:


280

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:

Properti <code> disableClose </code> di material.angular.io

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();
    })
  }
}

5
Saya merasa menjengkelkan bahwa Anda harus menonaktifkan "melarikan diri dan mengklik di luar". Untuk menyiasati ini:@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
Marc Brazeau

@MarcBrazeau Saya telah menambahkan komentar Anda ke jawaban saya.
Edric

1
Peringatan untuk orang yang menggunakan kolom masukan dengan pelengkapan otomatis. Menggunakan HostListener menutup dialog saat Anda menutup daftar pelengkapan otomatis.
Jompis

Terima kasih atas bantuan Anda
Rafael Moura

1
Anda juga perlu menangani berhenti berlangganan dari backdropClick Observable jika tidak, Anda akan menyebabkan kebocoran memori.
suram

3

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


mengatur hasBackdrop ke false menghilangkan penggelapan area di luar dialog
Mohit Atray

Bekerja dengan Angular 9. 'hasBackdrop' tidak mengizinkan pengguna untuk berinteraksi dengan elemen luar lainnya. disableClose tidak mengizinkan pengguna untuk menutup dialog dengan klik luar atau tombol escape.
Naveen Kumar V

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.