Angular2マテリアルダイアログ入力値の使用方法

Question

Angular2マテリアルのサンプルアプリケーションには、ユーザーが書いたメッセージである文字列値を返すダイアログがあります。しかし、メッセージだけではなく、より多くの情報を求めるプロンプトを表示するにはどうすればよいでしょうか？

つまり、Angular2 Materialを使用しているときにダイアログのように動作するフォームを作成する方法を理解できません。

これは私がreferreingてるサンプルアプリです：https://github.com/jelbourn/material2-apphttps://github.com/jelbourn/material2-app/blob/master/src/app/app.component.tsで

：

@Component({ 
    template: ` 
    <p>This is a dialog</p> 
    <p> 
     <label> 
     This is a text box inside of a dialog. 
     <input #dialogInput> 
     </label> 
    </p> 
    <p> <button md-button **(click)="dialogRef.close(dialogInput.value)">CLOSE</button> </p>** 
    `, 
}) 
export class DialogContent { 
constructor(@Optional() public dialogRef: MdDialogRef<DialogContent>) { } 

あなたが見ることができるように、一つの値だけを取るdialogRef.close（dialogInput.value）があります。だから、より多くの値を取る入力を作成する方法は？

Answer 1

これは理論上はうまくいくはずです。達成するための一つの方法は、これはちょうどそれの一つであり、そこにもっと良い方法が常にあるあなたのDialogContentクラス

lastDialogResult: any; //not string anymore 

export class DialogContent { 
constructor(@ Optional()public dialogRef: MdDialogRef <DialogContent>) { 
    public MultiInput: any; //your modal here 
    } 
} 
// inputs are now binded to multiInput Modal. You could have many and different modals.. 
@Component({ 
    template: ` 
    <p>This is a dialog</p> 
    <p> 
     <label> 
     This is a text box inside of a dialog. 
     <input [(ngModel)]="multiInput.Input1"> 
     <input [(ngModel)]="multiInput.Input2"> 
     <input [(ngModel)]="multiInput.Input3"> 
     </label> 
    </p> 
    <p> <button md-button (click)="dialogRef.close(multiInput)">CLOSE</button> </p> 
    `, 
}) 



dialogRef.afterClosed().subscribe(result => { 
    console.log(result.Input1); 
    console.log(result.Input2); 
    console.log(result.Input3); 
    this.lastDialogResult = result; // your existing setup 
}) 

にモーダル/変数を宣言することです。 あなたの所見をお知らせください。