현재 Angular 4 프로젝트의 비밀번호 재설정 페이지에서 작업 중입니다. Angular Material을 사용하여 대화 상자를 만들지 만 클라이언트가 대화 상자를 클릭하면 자동으로 닫힙니다. 코드 측에서 "close"함수를 호출 할 때까지 대화 상자 닫기를 피하는 방법이 있습니까? 아니면 닫을 수없는 모달을 어떻게 만들어야 합니까?

두 가지 방법이 있습니다.

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키가 대화 상자를 닫지 않고 배경을 클릭하여 닫을 수 있도록 하기 위해 Marc의 대답 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();
    })
  }
}

이 두 가지 속성을 가지고 노는 것은 어떻습니까?

disableClose : boolean- 사용자가 이스케이프를 사용하거나 배경을 클릭하여 모달을 닫을 수 있는지 여부입니다.

hasBackdrop : boolean- 대화 상자에 배경이 있는지 여부.

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