Ich arbeite derzeit an der Seite zum Zurücksetzen des Passworts eines Angular 4-Projekts. Wir verwenden Angular Material, um das Dialogfeld zu erstellen. Wenn der Client jedoch aus dem Dialogfeld klickt, wird es automatisch geschlossen. Gibt es eine Möglichkeit, das Schließen des Dialogs zu vermeiden, bis unsere Codeseite die Funktion "Schließen" aufruft? Oder wie soll ich ein nicht verschließbares Modal erstellen ?

Es gibt zwei Möglichkeiten, dies zu tun.

1. Übergeben Sie in der Methode, die den Dialog öffnet, die folgende Konfigurationsoption disableCloseals zweiten Parameter MatDialog#open()und setzen Sie sie auf true:

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

2. Alternativ können Sie dies auch in der Dialogkomponente selbst tun.

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

Folgendes suchen Sie:

Und hier ist eine Stackblitz-Demo

Andere Anwendungsfälle

Hier sind einige andere Anwendungsfälle und Codeausschnitte, wie sie implementiert werden.

Erlaube escdas Schließen des Dialogfelds, verbiete jedoch das Klicken auf den Hintergrund, um das Dialogfeld zu schließen

Wie @MarcBrazeau im Kommentar unter meiner Antwort sagte, können Sie zulassen, dass der escSchlüssel das Modal schließt, aber das Klicken außerhalb des Modals weiterhin nicht zulässt . Verwenden Sie diesen Code für Ihre Dialogkomponente:

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

}

Verhindern Sie das escSchließen des Dialogfelds, lassen Sie jedoch das Schließen auf den Hintergrund zu

PS Dies ist eine Antwort, die aus dieser Antwort stammt , wobei die Demo auf dieser Antwort basierte.

Um zu verhindern, dass der escSchlüssel den Dialog schließt, aber das Klicken auf den Hintergrund zum Schließen zulässt, habe ich Marc's Antwort angepasst und verwendet MatDialogRef#backdropClick, um auf Klickereignisse im Hintergrund zu warten.

Für den Dialog wird zunächst die Konfigurationsoption disableClosefestgelegt true. Dadurch wird sichergestellt, dass durch escDrücken der Taste und Klicken auf den Hintergrund der Dialog nicht geschlossen wird.

Abonnieren Sie anschließend die MatDialogRef#backdropClickMethode (die beim Klicken auf den Hintergrund ausgegeben wird und als a zurückkehrt MouseEvent).

Sowieso genug technisches Gespräch. Hier ist der Code:

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

  // ...
}

Alternativ kann dies in der Dialogkomponente erfolgen:

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

Wie wäre es mit diesen beiden Eigenschaften zu spielen?

disableClose: boolean - Gibt an, ob der Benutzer Escape verwenden oder auf den Hintergrund klicken kann, um das Modal zu schließen.

hasBackdrop: boolean - Gibt an, ob der Dialog einen Hintergrund hat.

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