Wie speichere ich * die Ergebnisse eines eckigen Materialmodaldialogs?

Question

Ich habe eine Komponente, die einen modalen Dialog öffnet, damit der Benutzer zwei Daten eingeben kann. Ich würde dann gerne diese beiden Daten in einem db-Modell hinter der Komponente speichern, aber ich habe Probleme, meinen Kopf herumzulegen, wann und wo diese Ergebnisse erhalten werden.

Um klar zu sein: Ich kann derzeit das Dialogfeld Ergebnis als zwei Daten in der Vorlage meiner Hauptkomponente sehen, aber ich würde gerne wissen, in ... einige Methode ... in meiner Hauptkomponente, wenn der Dialog geschlossen ist und die Daten sind nicht mehr null - also kann ich sie in der DB speichern.

Meine Hauptkomponente Vorlage hat eine Schaltfläche mit einem onClick Ereignis:

<a class="btn btn-sm role="button"><mat-icon title="Get Dates" (click)="onClickGetDates(appt)">flag</mat-icon></a> Result from dialog: {{ dateRangeArray }} 

Die Hauptkomponente implementiert das OnClick-Ereignis:

onClickGetDates(appt) { 
    this.dialogService 
     .confirmDateRange('Get Dates', 'Enter two dates:', 
     appt.beginDate, appt.endDate) 
     .subscribe(res => this.dateRange = res); 
. 
. 
// I would like to now save the dateRange result to my database, but at this point, result is [null,null], so the code below does nothing (except null out the dates): 
appt.beginDate = dateRange[0]; 
appt.endDate = dateRange[1]; 
this.apptdata.updateAppt(appt); 
} 

Hier ist confirmDateRange, definiert in einem Dialog-Service, der tatsächlich Zeigt den Dialog an:

Und die Dialogkomponente:

export class ConfirmDialogComponent implements OnInit { 

    public title: string; 
    public message: string; 

    public beginDate: Date; 
    public endDate: Date; 

    constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>) { } 

    ngOnInit() { 
    } 

Und die Vorlage Dialog:

<h2>{{ title }}</h2> 
<hr> 
<p>{{ message }}</p> 

<!--Date Picker Begin--> 

<mat-form-field> 
    <input matInput [matDatepicker]="beginDatePicker" placeholder="Beginning" [(ngModel)]="beginDate"> 
    <mat-datepicker-toggle matSuffix [for]="beginDatePicker"></mat-datepicker-toggle> 
    <mat-datepicker #beginDatePicker></mat-datepicker> 
</mat-form-field> 


<!--Date Picker End--> 

<mat-form-field> 
    <input matInput [matDatepicker]="endDatePicker" placeholder="Ending" [(ngModel)]="endDate"> 
    <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle> 
    <mat-datepicker #endDatePicker></mat-datepicker> 
</mat-form-field> 


<!--OK--> 
<button type="button" mat-raised-button 
     (click)="dialogRef.close([beginDate, endDate])">OK</button> 

<!--Cancel--> 
<button type="button" mat-button 
     (click)="dialogRef.close()">Cancel</button> 

Nachdem im Dialog OK klicken, kann ich das resultierende Array mit den beiden Daten in der Hauptkomponente der Vorlage wie diese: Result from dialog: {{ dateRangeArray }}. Der Versuch, auf das gleiche Ergebnis in onClickGetDates zuzugreifen, ist "zu früh" und das Ergebnis ist ein Null-Array ... Also, wo/wann ist der richtige Ort, um das Ergebnis in meiner Hauptkomponente zu sehen?

Ich habe das Gefühl, dass ich das AfterClose() Ereignis des Dialogs missbrauche, und dass ich Ergebnisse erhalten könnte, kurz nachdem dieses Ereignis ausgelöst wurde, aber ich bin immer noch zu grün mit Angular um zu erkennen, was ich ' m falsch machen.

Answer 1

Versuchen Sie, diese

onClickGetDates(appt) { 
    this.dialogService 
     .confirmDateRange('Get Dates', 'Enter two dates:', 
     appt.beginDate, appt.endDate) 
     .subscribe(res => 
     {this.dateRange = res; 
//Set the appt's properties inside the subscribe 
appt.beginDate = this.dateRange[0]; 
appt.endDate = this.dateRange[1]; 
this.apptdata.updateAppt(appt); 
}); 

Answer 2

   Use @Output() to send dates from inner component to outer component and implement a function that call on Ok button and emit that data from that function like : 
       `@Output() response = new EventEmitter()<any>; 

       onOkClicked() 
       { 
       this.response.next({beginDate : beginDate , endDate: endDate}); 
       this.dialogRef.close(); 
       } 

       onCancelClicked() 
       { 
       this.dialogRef.close(); 
       } 

       confirmDateRange(title: string, message: string,appt): Observable<boolean> { 
       let dialogRef: MatDialogRef<ConfirmDialogComponent>; 

       dialogRef = this.dialog.open(ConfirmDialogComponent); 
       dialogRef.componentInstance.title = title; 
       dialogRef.componentInstance.message = message; 
       dialogRef.componentInstance.beginDate = appt.begin; 
       dialogRef.componentInstance.endDate = appt.end; 
       dialogRef.componentInstance.response.subscribe(res : any => { 
       appt.begin = res.beginDate; 
       appt.end = res.endDate; 
       }); 

       } 

      onClickGetDates(title:string , message :string , appt) { 
      this.confirmDateRange(title,message,appt); 
      } 
       `