Ang4でmd-dialogからデータを取得

Question

私はAngular 4アプリケーションでmd-dialag from Material Designを実装しています。私は現在、モーダルにデータを渡すことに成功しましたが、ダイアログでユーザーが入力したデータを取得することに成功していません。しかし、例えば、ダイアログ上で私は、ユーザーが記入する入力フィールド持って

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); 
    }); 
} 

：

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

が短縮名がある

この

は、私は、ダイアログを開く方法です私がダイアログを呼び出したクラスからの変数、それはその変数を変更しません、私はそれが独自のスコープを作成すると思うので、私のクラスインスタンス変数を使用していないのです。

ダイアログからデータを取得する際に欠点がありますか？

Answer 1

まず、取得ダイアログコンストラクタでMdDialogRef<DialogAddStop>参照してMD_DIALOG_DATAトークン：

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

もMD_DIALOG_DATAに関するいくつかの説明についてはUsing MdDialogConfig data on Angular 2参照してください。

ダイアログクラスの内部shortName変数を作成：親コンポーネントが提供するものに

public shortName: string 

セットshortNameの初期値：

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

「を作成します。保存 "ハンドラ：

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

保存ボタンをハンドラとしてアタッチ：ダイアログが

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