डायलॉग (कोणीय संस्करण 4.0+ के साथ) बंद करने के लिए कोणीय सामग्री संवाद क्षेत्र के बाहर क्लिक अक्षम करें

Question

मैं वर्तमान में एक कोणीय 4 परियोजना के पासवर्ड रीसेट पेज पर काम कर रहा हूं। हम संवाद बनाने के लिए कोणीय सामग्री का उपयोग कर रहे हैं, हालांकि, जब ग्राहक संवाद से बाहर निकलता है, तो यह स्वचालित रूप से बंद हो जाएगा। क्या हमारे कोड साइड "क्लोज़" फ़ंक्शन तक डायलॉग से बचने का कोई तरीका है? या मुझे एक अयोग्य मॉडल कैसे बनाना चाहिए ?

Answer 1

इसे करने के दो तरीके हैं।

1. संवाद खोलने वाली विधि में, निम्न कॉन्फ़िगरेशन विकल्प disableCloseमें दूसरे पैरामीटर के रूप में पास करें MatDialog#open()और इसे इसमें सेट करें true:

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

2. वैकल्पिक रूप से, इसे संवाद घटक में ही करें।

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

Comments

मुझे यह कष्टप्रद लगता है कि आपको "भागने और बाहर क्लिक करने" दोनों को अक्षम करना होगा। इसके आसपास जाने के लिए:@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }

— मार्क ब्रेज़ू

@MarcBrazeau मैंने अपनी टिप्पणी मेरे जवाब में जोड़ दी है।

— एडिक

स्वत: पूर्ण के साथ इनपुट फ़ील्ड का उपयोग करने वाले लोगों के लिए एक चेतावनी। जब आप स्वतः पूर्ण सूची को बंद करते हैं तो HostListener का उपयोग करना संवाद को बंद कर देता है।

— जंपिस

आपकी मदद के लिए धन्यवाद

— राफेल मौरा

आपको बैकड्रॉपक्लिक ऑब्जर्वेबल से अनसब्सक्राइबिंग को भी हैंडल करने की आवश्यकता होगी अन्यथा आप एक मेमोरी लीक को पेश करेंगे।

— गंभीर

Answer 2

कैसे इन दो गुणों के साथ खेलने के बारे में?

अक्षम करें: बूलियन - क्या उपयोगकर्ता मोडल को बंद करने के लिए बैकग्राउंड पर भागने या क्लिक करने का उपयोग कर सकता है।

hasBackdrop: बूलियन - चाहे संवाद की पृष्ठभूमि हो।

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

Comments

सेटिंग है बैकग्राउंड टू झूठी डायलॉग के बाहर के क्षेत्र के कालेपन को हटाता है

— मोहित अत्रे

कोणीय 9 के साथ काम किया। 'hasBackdrop' उपयोगकर्ता को अन्य बाहरी तत्वों के साथ बातचीत करने की अनुमति नहीं देता है। disableClose उपयोगकर्ता को बाहरी क्लिक या भागने की कुंजी के साथ संवाद बंद करने की अनुमति नहीं देता है।

— नवीन कुमार V