Question

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

换句话说，在使用Angular2 Material时，我无法弄清楚如何制作一个像对话框一样的表单。

这是我推荐的示例应用：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
})

总有一种更好的方式，这只是其中之一。让我们知道您的发现。

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

1 个答案: