ฉันกำลังดำเนินการกับหน้ารีเซ็ตรหัสผ่านของโปรเจ็กต์ Angular 4 เรากำลังใช้ Angular Material เพื่อสร้างกล่องโต้ตอบอย่างไรก็ตามเมื่อลูกค้าคลิกออกจากกล่องโต้ตอบมันจะปิดโดยอัตโนมัติ มีวิธีหลีกเลี่ยงการปิดกล่องโต้ตอบจนกว่าฝั่งรหัสของเราจะเรียกใช้ฟังก์ชัน "ปิด" หรือไม่? หรือว่าฉันควรสร้างunclosableกิริยา?

มีสองวิธีในการทำ

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ปิดกล่องโต้ตอบ แต่อนุญาตให้คลิกที่ฉากหลังเพื่อปิด

ปล. นี่คือคำตอบที่มาจากคำตอบนี้ซึ่งการสาธิตเป็นไปตามคำตอบนี้

เพื่อป้องกันไม่ให้escคีย์ปิดกล่องโต้ตอบ แต่อนุญาตให้คลิกที่ฉากหลังเพื่อปิดฉันได้ปรับคำตอบของ Marc รวมถึงใช้MatDialogRef#backdropClickเพื่อฟังเหตุการณ์คลิกที่ฉากหลัง

ในขั้นต้นโต้ตอบจะมีตัวเลือกการกำหนดค่าการตั้งค่าเป็นdisableClose trueเพื่อให้แน่ใจว่าการescกดแป้นและการคลิกที่ฉากหลังจะไม่ทำให้กล่องโต้ตอบปิดลง

หลังจากนั้นสมัครใช้งานMatDialogRef#backdropClickเมธอด (ซึ่งจะส่งเสียงเมื่อฉากหลังถูกคลิกและส่งกลับเป็น a 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();
    })
  }
}

แล้วเล่นกับคุณสมบัติสองอย่างนี้ได้อย่างไร?

disableClose: boolean - ระบุว่าผู้ใช้สามารถใช้ Escape หรือคลิกที่ฉากหลังเพื่อปิดโมดอล

hasBackdrop: boolean - กล่องโต้ตอบมีฉากหลังหรือไม่

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

เพิ่ม

[config]="{backdrop: 'static'}"

ไปยังรหัสรุ่น