Winkel-Material Dialog Rückgabewert

Ich habe einen folgenden dialog Komponente (die ich öffnen mit dialog.open(MyDialogComponent) in einer anderen Komponente):

export class MyDialogComponent implements OnInit {
  constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {}

  ngOnInit() {}
}

Ich weiß, ich kann keine Daten an die aufrufende Komponente durch ausführen matDialogRef.close(dataToReturn) gebunden, auf eine Schaltfläche im dialog-Komponente. Aber wie kann ich die Daten zurückgegeben, wenn ein Benutzer geklickt anderswo, aber das popup, um es zu schließen?

InformationsquelleAutor Matúš Zábojník | 2017-10-20
  1. 16

    Wenn jemand interessiert ist, ich habe eine Lösung gefunden (nicht sicher, ob es der beste ist). Nur das deaktivieren des default-close-operation, damit das popup nicht zu schließen, auf den hintergrund klicken, beim schließen ist es mit Daten param auf hintergrund klicken.

    matDialogRef.disableClose = true;//disable default close operation
matDialogRef.backdropClick().subscribe(result => {
  matDialogRef.close(dataToReturn);
});

    Diese Weise wird die aufrufende Komponente, die die Daten erhält, ob der dialog wurde geschlossen, indem die Schaltfläche angeklickt oder anderswo.

    • Sollten Sie auch abonnieren, um Tastatur-Ereignisse zu behandeln, die esc - Taste. Ich stöberte durch den source-code und weiß nicht wirklich sehen, einen besseren Weg, dies zu tun. Zum Glück, den hintergrund und klicken Sie auf esc keydown-Ereignis sind die nur zwei Dinge, die sein müssen reimplementiert, um die gleiche Funktionalität.
    • es funktioniert für mich.zurückgeben müssen, Wert, wenn Sie in der Nähe
    • Wo stellen Sie die dataToReturn Objekt ?
    • Nur über die matDialogRef.in der Nähe(dataToReturn); line. Denken Sie daran, dass die Anmeldung findet in der Zeit schaffen, den dialog (und in der Regel sind Sie wieder, einen Wert, der nicht bekannt zu diesem Zeitpunkt), damit das setzen der return-Wert sollte im folgenden lambda-Funktion Ergebnis => { lassen dataToReturn = ...; matDialogRef.in der Nähe(dataToReturn); })
    InformationsquelleAutor Matúš Zábojník
  2. 1

    Rufen Sie die close(dataToReturn) im beforeClose() zu setzen, den dialog führen:

    constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {
    matDialogRef.beforeClose().subscribe(() => matDialogRef.close(this.dataToReturn));
}

    Dies funktioniert, wenn der dialog wird geschlossen, indem Sie auf den hintergrund oder die Taste ESC.

    • Das ist die richtige Lösung, Eckig-Material 7+ (vielleicht niedrigeren Versionen zu, nicht sicher). Sie können auch erhalten, wenn der Benutzer auf ja geklickt haben, keine oder nur entkommen, (mat-dialog-nah) durch die erste übergebene argument in die subscribe-Methode: matDialogRef.beforeClose().subscribe((value) => matDialogRef.close(this.dataToReturn)); }
    InformationsquelleAutor A-Sharabiani
Schreibe einen Kommentar