Şu anda bir Angular 4 projesinin şifre sıfırlama sayfası üzerinde çalışıyorum. İletişim kutusunu oluşturmak için Açısal Malzeme kullanıyoruz, ancak müşteri iletişim kutusunun dışına tıkladığında otomatik olarak kapanacaktır. Kod tarafımız "kapat" işlevini çağırana kadar iletişim kutusunun kapanmasını önlemenin bir yolu var mı? Veya kapatılamaz bir model nasıl oluşturmalıyım ?

Bunu yapmanın iki yolu var.

1. İletişim kutusunu açan yöntemde, aşağıdaki yapılandırma seçeneğini disableCloseikinci parametre olarak girin MatDialog#open()ve şu şekilde ayarlayın true:

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

2. Alternatif olarak, bunu iletişim bileşeninin kendisinde yapın.

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

İşte aradığınız şey:

Ve işte bir Stackblitz demosu

Diğer kullanım durumları

İşte bunların nasıl uygulanacağına dair bazı diğer kullanım durumları ve kod parçacıkları.

escİletişim kutusunun kapatılmasına izin ver , ancak iletişim kutusunu kapatmak için arka plana tıklamaya izin verme

@MarcBrazeau'nun cevabımın altındaki yorumda söylediği gibi, anahtarın modu kapatmasına izin verebilir, escancak yine de modal dışına tıklamaya izin vermeyebilirsiniz . Bu kodu iletişim bileşeninizde kullanı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();
  }

}

escDiyaloğu kapatmayı engelle , ancak arka plana tıklamaya izin ver

PS Bu kökenli bir cevaptır bu cevap demo Bu yanıta göre edildi.

escAnahtarın iletişim kutusunu kapatmasını önlemek, ancak arka plana tıklamaya izin vermek için, Marc'ın cevabını uyarladım MatDialogRef#backdropClickve tıklama olaylarını arka plana dinledim.

Başlangıçta, iletişim kutusunun yapılandırma seçeneği olarak disableCloseayarlanmış olacaktır true. Bu, esctuşa basmanın yanı sıra arka plana tıklamanın iletişim kutusunun kapanmasına neden olmamasını sağlar.

Daha sonra, MatDialogRef#backdropClickyönteme abone olun (fon tıklandığında ortaya çıkar ve a olarak geri döner MouseEvent).

Her neyse, yeterince teknik konuşma. İşte kod:

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

  // ...
}

Alternatif olarak, bu, iletişim kutusu bileşeninde yapılabilir:

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

Bu iki özellikle oynamaya ne dersiniz?

disableClose: boolean - Kullanıcının modu kapatmak için kaçış veya arka planı tıklayıp kullanamayacağı.

hasBackdrop: boolean - İletişim kutusunun bir arka plana sahip olup olmadığı.

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

Ekle

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

model koduna.