Można to zrobić na dwa sposoby.
W metodzie, która otwiera okno dialogowe, podaj następującą opcję konfiguracyjną disableClose
jako drugi parametr programu MatDialog#open()
i ustaw ją na true
:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
Alternatywnie zrób to w samym komponencie okna dialogowego.
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>){
dialogRef.disableClose = true;
}
}
Oto, czego szukasz:
A oto demo Stackblitz
Inne przypadki użycia
Oto kilka innych przypadków użycia i fragmenty kodu pokazujące, jak je zaimplementować.
Pozwól esczamknąć okno dialogowe, ale nie zezwalaj na klikanie tła w celu zamknięcia okna
Jak powiedział @MarcBrazeau w komentarzu pod moją odpowiedzią, możesz pozwolić escklawiszowi na zamknięcie modalu, ale nadal nie zezwalaj na klikanie poza modalem. Użyj tego kodu w komponencie okna dialogowego:
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();
}
}
Zapobiegaj esczamykaniu okna, ale pozwól na kliknięcie tła, aby je zamknąć
PS To jest odpowiedź, która pochodzi z tej odpowiedzi , gdzie demo było oparte na tej odpowiedzi.
Aby escklawisz nie zamykał okna, ale pozwalał na kliknięcie tła w celu zamknięcia, dostosowałem odpowiedź Marca, a także użycie funkcji MatDialogRef#backdropClick
nasłuchiwania kliknięć do tła.
Początkowo w oknie dialogowym opcja konfiguracji będzie disableClose
ustawiona jako true
. Gwarantuje to, że esc
naciśnięcie klawisza, a także kliknięcie tła nie spowoduje zamknięcia okna dialogowego.
Następnie zasubskrybuj MatDialogRef#backdropClick
metodę (która jest emitowana po kliknięciu tła i powraca jako MouseEvent
).
Tak czy inaczej, dość technicznych rozmów. Oto kod:
openDialog() {
let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
dialogRef.backdropClick().subscribe(() => {
dialogRef.close();
})
}
Alternatywnie można to zrobić w komponencie okna dialogowego:
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>) {
dialogRef.disableClose = true;
dialogRef.backdropClick().subscribe(() => {
dialogRef.close();
})
}
}
@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
A co powiesz na zabawę z tymi dwoma właściwościami?
źródło
Dodaj
do kodu modelu.
źródło