কথোপকথনটি বন্ধ করার জন্য কৌণিক উপাদান সংলাপ অঞ্চলের বাইরের ক্লিকটি অক্ষম করুন (কৌনিক সংস্করণ 4.0+ সহ)


109

আমি বর্তমানে একটি কৌনিক 4 প্রকল্পের পাসওয়ার্ড রিসেট পৃষ্ঠায় কাজ করছি। ডায়লগটি তৈরি করতে আমরা কৌণিক উপাদান ব্যবহার করছি, তবে ক্লায়েন্টটি যখন ডায়ালগটি থেকে সরিয়ে দেয় তখন তা স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। আমাদের কোড সাইড কল "ক্লোজ" ফাংশন না হওয়া পর্যন্ত ডায়লগটি বন্ধ করার কোনও উপায় আছে কি? বা কীভাবে আমি একটি অনাদায়ী মডেল তৈরি করব ?

উত্তর:


281

এটি করার দুটি উপায় আছে।

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

আপনি যা খুঁজছেন তা এখানে:

উপাদান.আঙ্গুলার.ইও-তে <code> নিষ্ক্রিয় করুন ক্লোজ </ কোড> সম্পত্তি

এবং এখানে একটি স্ট্যাকব্লিটজ ডেমো রয়েছে


অন্যান্য ব্যবহারের ক্ষেত্রে

এগুলি কীভাবে প্রয়োগ করা যায় সে সম্পর্কে কিছু অন্যান্য ব্যবহারের কেস এবং কোড স্নিপেটগুলি এখানে।

escকথোপকথনটি বন্ধ করার অনুমতি দিন তবে ডায়লগটি বন্ধ করতে পটভূমিতে ক্লিক করতে রাজি হন না

@ মার্কব্রেজেউ আমার উত্তরের নীচে দেওয়া মন্তব্যে যা বলেছে, আপনি কীটিটি মডেলটি 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কথোপকথনটি বন্ধ করা থেকে বিরত করুন তবে পটভূমিতে ক্লিক করে বন্ধ করতে দিন

পিএস এটি এমন একটি উত্তর যা এই উত্তর থেকে উদ্ভূত , যেখানে ডেমোটি এই উত্তরটির উপর ভিত্তি করে তৈরি হয়েছিল।

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

4
আমি বিরক্তিকর মনে করি যে আপনাকে "পালাতে এবং বাইরে ক্লিক করা" উভয়ই অক্ষম করতে হবে। এটি পেতে:@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
মার্ক ব্রাজাউ

@ মার্কব্রেজেউ আমি আমার মন্তব্যে আপনার মন্তব্য যুক্ত করেছি।
এড্রিক

4
স্বতঃপূরণ সহ ইনপুট ক্ষেত্রগুলি ব্যবহার করা লোকদের জন্য একটি সতর্কতা। হোস্টলিস্টনার ব্যবহার করে আপনি স্বয়ংক্রিয়-সম্পূর্ণ তালিকাটি বন্ধ করলে ডায়ালগটি বন্ধ হয়ে যায়।
জম্পিস

আপনার সহায়তার জন্য ধন্যবাদ
রাফেল

4
আপনাকে ব্যাকড্রপ থেকে সাবস্ক্রিপশন পরিচালনা করতে হবে পর্যবেক্ষণযোগ্য ক্লিক করুন অন্যথায় আপনি একটি মেমরি ফাঁস প্রবর্তন করবেন।
গুরুতর

3

এই দুটি বৈশিষ্ট্য নিয়ে কীভাবে খেলবেন?

DisableClose: বুলিয়ান - ব্যবহারকারী মোডালটি বন্ধ করতে পটভূমিতে ক্লিক করে পালাতে বা ক্লিক করতে পারে কিনা।

হ্যাকব্রড্রপ: বুলিয়ান - ডায়ালগটির ব্যাকড্রপ রয়েছে কিনা।

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


মিথ্যাতে ব্যাকড্রপ সেট করা ডায়লগের বাইরের অঞ্চল কৃষ্ণচূড়া দূর করে
মোহিত আত্রে

কৌণিক 9. সাথে কাজ করেছেন '' হ্যাকব্যাকড্রপ 'ব্যবহারকারীকে বাইরের অন্যান্য উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয় না। নিষ্ক্রিয়ক্লোজ ব্যবহারকারীকে বাইরের ক্লিক বা এস্কেপ কী দিয়ে ডায়ালগটি বন্ধ করতে দেয় না।
নবীন কুমার ভি

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.