इसे करने के दो तरीके हैं।
संवाद खोलने वाली विधि में, निम्न कॉन्फ़िगरेशन विकल्प disableClose
में दूसरे पैरामीटर के रूप में पास करें MatDialog#open()
और इसे इसमें सेट करें true
:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
वैकल्पिक रूप से, इसे संवाद घटक में ही करें।
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>){
dialogRef.disableClose = true;
}
}
यहाँ आप क्या देख रहे हैं:
और यहाँ एक Stackblitz डेमो है
अन्य उपयोग के मामले
यहां कुछ अन्य उपयोग के मामले और कोड स्निपेट हैं कि उन्हें कैसे लागू किया जाए।
escसंवाद को बंद करने की अनुमति दें लेकिन संवाद को बंद करने के लिए पृष्ठभूमि पर क्लिक करने से मना करें
जैसा कि @MarcBrazeau ने मेरे जवाब के नीचे टिप्पणी में कहा था, आप escकुंजी को मोडल को बंद करने की अनुमति दे सकते हैं लेकिन फिर भी मोडल के बाहर क्लिक करने से मना कर सकते हैं । अपने संवाद घटक पर इस कोड का उपयोग करें:
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();
}
}
escसंवाद बंद करने से रोकें लेकिन पृष्ठभूमि को बंद करने पर क्लिक करने दें
PS यह एक उत्तर है जो इस उत्तर से उत्पन्न होता है , जहां डेमो इस उत्तर पर आधारित था।
escकुंजी को संवाद को बंद करने से रोकने के लिए लेकिन पृष्ठभूमि को बंद करने पर क्लिक करने की अनुमति दें, मैंने मार्क के उत्तर को अनुकूलित किया है, साथ ही MatDialogRef#backdropClick
पृष्ठभूमि पर क्लिक करने की घटनाओं को सुनने के लिए उपयोग किया है।
प्रारंभ में, संवाद विन्यास विकल्प के disableClose
रूप में सेट होगा true
। यह सुनिश्चित करता है कि की- esc
बोर्ड, साथ ही बैकड्रॉप पर क्लिक करने से संवाद बंद नहीं होगा।
बाद में, MatDialogRef#backdropClick
विधि की सदस्यता लें (जो पृष्ठभूमि के क्लिक होने पर निकलती है और वापस लौटती है MouseEvent
)।
वैसे भी, पर्याप्त तकनीकी बात। यहाँ कोड है:
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();
})
// ...
}
वैकल्पिक रूप से, यह संवाद घटक में किया जा सकता है:
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(); }