如何使用Angular2 Material对话框输入值

Question

Angular2 Material的示例应用程序有一个对话框，它返回一个字符串值，这是用户写入的消息。但是如果我想提示用户获取更多信息而不仅仅是一条消息呢？

换句话说，我无法弄清楚如何在使用Angular2 Material时创建一个类似于对话框的窗体。

这是样本应用程序，我referreing到：https://github.com/jelbourn/material2-app

在https://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 
}) 

宣布一个模式/变量总是有出有更好的办法，这只是其中的一个。 让我们知道你的发现。