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

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

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

두 가지 방법이 있습니다.

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 데모가 있습니다.

---

기타 사용 사례

다음은 구현 방법에 대한 몇 가지 다른 사용 사례 및 코드 조각입니다.

대화 상자를 닫을 수는 있지만 배경을 클릭하여 대화 상자를 닫을 수는 없습니다.

@MarcBrazeau가 제 답변 아래의 댓글에서 말한 것처럼, 당신은 키가 모달을 닫도록 허용할 수 있지만 여전히 모달 외부의 클릭은 허용하지 않습니다.대화 상자 구성 요소에서 이 코드를 사용합니다.

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

}

---

대화 상자를 닫을 수는 없지만 닫으려면 배경을 클릭합니다.

추신. 이것은 이 답변에서 시작된 답변입니다. 여기서 데모는 이 답변을 기반으로 합니다.

키가 대화 상자를 닫지 않도록 하되 닫기 위해 배경을 클릭할 수 있도록 마크의 답변을 수정했습니다.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 - 사용자가 이스케이프를 사용하거나 배경을 클릭하여 모달을 닫을 수 있는지 여부를 나타냅니다.

hasBackdrop: boolean - 대화 상자에 배경이 있는지 여부를 나타냅니다.

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

더하다

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

모달 코드로.

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