각도 재질 대화 상자 영역 외부를 클릭하여 대화 상자를 닫습니다 (Angular 버전 4.0 이상 사용).

각도 재질 대화 상자 영역 외부를 클릭하여 대화 상자를 닫습니다 (Angular 버전 4.0 이상 사용).

---

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

---

이것은 나를 위해 작동합니다

  openDialog() {
    this.dialog.open(YourComponent, { disableClose: true });
  }

---

RTFM

여기 문서에 따르면 disableClose입력을 사용하여 사용자가 대화 상자를 닫는 것을 방지 할 수 있습니다 .

참고 URL : https://stackoverflow.com/questions/46772852/disable-click-outside-of-angular-material-dialog-area-to-close-the-dialog-with