如何使用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 
}) 

宣佈一個模式/變量總是有出有更好的辦法，這只是其中的一個。 讓我們知道你的發現。