Deaktivieren Sie das Klicken außerhalb des Dialogfelds für eckiges Material, um das Dialogfeld zu schließen (mit Angular Version 4.0+).

99

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 ?

Terry Zhang
quelle

Antworten:

261

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:

<code> disableClose </ code> -Eigenschaft in material.angular.io

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();
    })
  }
}
Edric
quelle
5
Ich finde es ärgerlich, dass Sie sowohl "Escape als auch Klicken nach draußen" deaktivieren müssen. Um dies zu @HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
umgehen
@MarcBrazeau Ich habe Ihren Kommentar zu meiner Antwort hinzugefügt.
Edric
1
Eine Warnung für Personen, die Eingabefelder mit automatischer Vervollständigung verwenden. Wenn Sie den HostListener verwenden, wird der Dialog geschlossen, wenn Sie die Liste für die automatische Vervollständigung schließen.
Jompis
Vielen Dank für Ihre Hilfe
Rafael Moura
1
Sie müssten auch das Abbestellen über den Hintergrund durchführen. Klicken Sie auf Observable, da sonst ein Speicherverlust auftritt.
grimmig
3

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

alansiqueira27
quelle
Wenn Sie hasBackdrop auf false setzen, wird die Schwärzung des Bereichs außerhalb des Dialogfelds entfernt
Mohit Atray,
Arbeitete mit Angular 9. Mit 'hasBackdrop' kann der Benutzer nicht mit anderen externen Elementen interagieren. Mit disableClose kann der Benutzer den Dialog nicht mit einem externen Klick- oder Escape-Schlüssel schließen.
Naveen Kumar V vor