এটি করার দুটি উপায় আছে।
ডায়ালগটি খোলার পদ্ধতিতে, 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;
}
}
আপনি যা খুঁজছেন তা এখানে:
এবং এখানে একটি স্ট্যাকব্লিটজ ডেমো রয়েছে
অন্যান্য ব্যবহারের ক্ষেত্রে
এগুলি কীভাবে প্রয়োগ করা যায় সে সম্পর্কে কিছু অন্যান্য ব্যবহারের কেস এবং কোড স্নিপেটগুলি এখানে।
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 });
dialogRef.backdropClick().subscribe(() => {
dialogRef.close();
})
}
বিকল্পভাবে, এটি ডায়ালগ উপাদানটিতে করা যেতে পারে:
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>) {
dialogRef.disableClose = true;
dialogRef.backdropClick().subscribe(() => {
dialogRef.close();
})
}
}
@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }