Tôi hiện đang làm việc trên trang đặt lại mật khẩu của một dự án Angular 4. Chúng tôi đang sử dụng Angular Material để tạo hộp thoại, tuy nhiên, khi khách hàng nhấp ra khỏi hộp thoại, hộp thoại sẽ tự động đóng lại. Có cách nào để tránh đóng hộp thoại cho đến khi phía mã của chúng tôi gọi hàm "đóng" không? Hoặc làm thế nào tôi nên tạo một unclosable modal?

Có hai cách để làm điều đó.

1. Trong phương thức mở hộp thoại, hãy chuyển vào tùy chọn cấu hình sau disableCloselàm tham số thứ hai MatDialog#open()và đặt nó thành true:

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

2. Ngoài ra, hãy làm điều đó trong chính thành phần hộp thoại.

   export class DialogComponent {
     constructor(private dialogRef: MatDialogRef<DialogComponent>){
       dialogRef.disableClose = true;
     }
   }

Đây là những gì bạn đang tìm kiếm:

Và đây là bản demo của Stackblitz

Các trường hợp sử dụng khác

Dưới đây là một số trường hợp sử dụng khác và đoạn mã về cách triển khai chúng.

Cho phép escđóng hộp thoại nhưng không cho phép nhấp vào phông nền để đóng hộp thoại

Như những gì @MarcBrazeau đã nói trong nhận xét bên dưới câu trả lời của tôi, bạn có thể cho phép esckhóa để đóng phương thức nhưng vẫn không cho phép nhấp bên ngoài phương thức. Sử dụng mã này trên thành phần hộp thoại của bạn:

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

}

Ngăn escđóng hộp thoại nhưng cho phép nhấp vào phông nền để đóng

Tái bút Đây là một câu trả lời bắt nguồn từ câu trả lời này , nơi demo dựa trên câu trả lời này.

Để ngăn esckhóa đóng hộp thoại nhưng cho phép nhấp vào phông nền để đóng, tôi đã điều chỉnh câu trả lời của Marc, cũng như sử dụng MatDialogRef#backdropClickđể lắng nghe các sự kiện nhấp chuột vào phông nền.

Ban đầu, hộp thoại sẽ có tùy chọn cấu hình disableCloseđược đặt như true. Điều này đảm bảo rằng việc escnhấn phím, cũng như nhấp vào phông nền sẽ không khiến hộp thoại bị đóng.

Sau đó, đăng ký MatDialogRef#backdropClickphương thức (phát ra khi phông nền được nhấp và trả về dưới dạng a MouseEvent).

Dù sao, đủ kỹ thuật nói chuyện. Đây là mã:

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

  // ...
}

Ngoài ra, điều này có thể được thực hiện trong thành phần hộp thoại:

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

Làm thế nào về việc chơi với hai tài sản này?

disableClose: boolean - Liệu người dùng có thể sử dụng Escape hoặc nhấp vào phông nền để đóng phương thức hay không.

hasBackdrop: boolean - Hộp thoại có phông nền hay không.

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