Es gibt zwei Möglichkeiten, dies zu tun.
Übergeben Sie in der Methode, die den Dialog öffnet, die folgende Konfigurationsoption disableClose
als zweiten Parameter MatDialog#open()
und setzen Sie sie auf true
:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
Alternativ können Sie dies auch in der Dialogkomponente selbst tun.
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>){
dialogRef.disableClose = true;
}
}
Folgendes suchen Sie:
Und hier ist eine Stackblitz-Demo
Andere Anwendungsfälle
Hier sind einige andere Anwendungsfälle und Codeausschnitte, wie sie implementiert werden.
Erlaube escdas Schließen des Dialogfelds, verbiete jedoch das Klicken auf den Hintergrund, um das Dialogfeld zu schließen
Wie @MarcBrazeau im Kommentar unter meiner Antwort sagte, können Sie zulassen, dass der escSchlüssel das Modal schließt, aber das Klicken außerhalb des Modals weiterhin nicht zulässt . Verwenden Sie diesen Code für Ihre Dialogkomponente:
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();
}
}
Verhindern Sie das escSchließen des Dialogfelds, lassen Sie jedoch das Schließen auf den Hintergrund zu
PS Dies ist eine Antwort, die aus dieser Antwort stammt , wobei die Demo auf dieser Antwort basierte.
Um zu verhindern, dass der escSchlüssel den Dialog schließt, aber das Klicken auf den Hintergrund zum Schließen zulässt, habe ich Marc's Antwort angepasst und verwendet MatDialogRef#backdropClick
, um auf Klickereignisse im Hintergrund zu warten.
Für den Dialog wird zunächst die Konfigurationsoption disableClose
festgelegt true
. Dadurch wird sichergestellt, dass durch esc
Drücken der Taste und Klicken auf den Hintergrund der Dialog nicht geschlossen wird.
Abonnieren Sie anschließend die MatDialogRef#backdropClick
Methode (die beim Klicken auf den Hintergrund ausgegeben wird und als a zurückkehrt MouseEvent
).
Sowieso genug technisches Gespräch. Hier ist der Code:
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();
})
// ...
}
Alternativ kann dies in der Dialogkomponente erfolgen:
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();
})
}
}
@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
Wie wäre es mit diesen beiden Eigenschaften zu spielen?
quelle