wake-up-neo.com

Deaktivieren Sie den Klick außerhalb des Winkelmaterialdialogfelds, um das Dialogfeld zu schließen (With Angular Version 4.0+).

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

30
Zeqing Zhang

Es gibt zwei Möglichkeiten, dies zu tun.

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

    export class AppComponent {
      constructor(private dialog: MatDialog){}
      openDialog() {
        this.dialog.open(DialogComponent, { disableClose: true });
      }
    }
    
  2. Alternativ können Sie dies in der Dialogkomponente selbst tun.

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

Folgendes suchen Sie:

<code>disableClose</code> property in material.angular.io

Und hier ist eine Stackblitz-Demo


Andere Anwendungsfälle

Im Folgenden finden Sie einige andere Anwendungsfälle und Codefragmente zu deren Implementierung.

Ermöglichen esc um das Dialogfeld zu schließen, klicken Sie jedoch nicht auf den Hintergrund, um das Dialogfeld zu schließen

Wie @MarcBrazeau in dem Kommentar unter meiner Antwort sagte, können Sie das zulassen esc Taste, um das Modal zu schließen, das Klicken außerhalb des Modals jedoch immer noch nicht zuzulassen. 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 esc Klicken Sie zum Schließen des Dialogfelds auf den Hintergrund

P.S. Dies ist eine Antwort, die von diese Antwort stammt, wobei die Demo auf dieser Antwort basierte.

Um das zu verhindern esc Ich habe Marc's Antwort angepasst und MatDialogRef#backdropClick verwendet, um auf Klickereignisse im Hintergrund zu warten.

Zu Beginn wird im Dialogfeld die Konfigurationsoption disableCloseals truefestgelegt. Auf diese Weise wird sichergestellt, dass der Dialog nicht geschlossen wird, wenn Sie escdrücken und auf den Hintergrund klicken.

Abonnieren Sie anschließend die Methode MatDialogRef#backdropClick (die ausgegeben wird, wenn auf den Hintergrund geklickt wird, und als MouseEventzurückgegeben wird).

Sowieso genug Fachgesprä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();
    })
  }
}
117
Edric

RTFM

Gemäß der Dokumentation hier können Sie die Eingabe disableClose verwenden, um zu verhindern, dass der Benutzer den Dialog schließt.

0
Abdel

Das funktioniert für mich 

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

Ich weiß, dass dies ein paar Jahre alt ist, aber können Sie backdrop: 'static' nicht verwenden, um das Klicken nach außen zu deaktivieren, und keyboard: false, um die Escape-Funktion zu deaktivieren?

Docs scrolle runter zum Modalbereich. Ziemlich sicher, dass es gut für Angular 4+ ist.

Meh Beispiel:

import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";

@Component({
  // Setup stuff..
})

export class ModalExample {
  modalRef: BsModalRef;

  constructor(
    private modalService: BsModalService, 
  ) { }

  ngOnInit(): void {

  }

  public openConfirmationModal(submitClaimResult: SubmitDealerClaimResult) {
    this.modalRef = this.modalService.show({backdrop: 'static', keyboard: false });
  }

}
0
DForsyth