Erhalte Daten von md-dialog über Angular4

Question

Ich implementiere eine md-dialag from Material Design auf meiner Angular 4-Anwendung. Ich habe es bis jetzt geschafft, Daten in das Modal zu übertragen, aber es ist mir nicht gelungen, die vom Benutzer im Dialog eingegebenen Daten abzurufen.

Dies ist, wie ich einen Dialog:

ShowAddStop() { 
    this.general = {fc: this.locationCtrl, fl: this.filteredLocations, selectedNewStop:this.selectedNewStop}; 
    let dialogRef = this.dialog.open(DialogAddStop,{data:this.general}); 
    dialogRef.afterClosed().subscribe(result => { 
     console.log(result); 
    }); 
} 

Aber zum Beispiel im Dialog ich ein Eingabefeld, die ich mag der Benutzer füllen:

<input [(ngModel)]="ShortName"> 

Wo Kurzname ist ein Variable für die Klasse, von der ich das Dialogfeld aufgerufen habe, es wird diese Variable nicht ändern, ich denke, es erstellt einen eigenen Bereich und deshalb verwendet es meine Klasseninstanzvariablen nicht.

Gibt es etwas Grundsätzliches fehlt mir auf Daten zurück aus dem Dialog Abrufen?

Answer 1

Zuerst acquire eine MdDialogRef<DialogAddStop> Referenz und ein MD_DIALOG_DATA Token im Dialog Konstruktor:

constructor(
    @Inject(MD_DIALOG_DATA) private dialogData: any, 
    private dialogRef: MdDialogRef<DialogAddStop> 
) {} 

Siehe auch Using MdDialogConfig data on Angular 2 für einige Erläuterungen zu MD_DIALOG_DATA.

erstellen einen shortName Variable innerhalb der Dialogklasse:

public shortName: string 

Set Anfangswert von shortName die von der übergeordneten Komponente zur Verfügung gestellt:

public ngOnInit(): void { 
    this.shortName = this.dialogData['shortName'] 
} 

Erstellen eines „ Speichern "Handler:

public onSave() { 
    this.dialogRef.close(this.shortName) 
} 

anhängen, die auf die Speichern Taste handler:

<button (click)="onSave()" md-button>Save</button>