将输入值传递给对话框组件

Question

我正在实现 material2 的对话框组件并遇到这个问题：

我想为所有确认类型的消息制作一个通用对话框，开发人员可以根据业务需求在对话框中输入文本。但是根据 docs 没有这样的规定。我们是否有相同的解决方法，或者我应该 post 它作为 github 上的功能请求？

export class ConfirmationDialogComponent implements OnInit {
  @Input() confirmationText: string;
  @Input() confirmationTitle: string;
  @Input() confirmationActions: [string, string][] = [];

  constructor(public dialogRef: MdDialogRef<ConfirmationDialogComponent>) {}

  ngOnInit() {}
}

这样调用：

let dialogRef = this.dialog.open(ConfirmationDialogComponent);

Answer 1

open 会给你组件实例，意味着你可以像这样注入任何你想要的东西：

openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.text = "This text can be used inside DialogOverviewExampleDialog template ";
    console.log('dialogRef',dialogRef);
  }

然后显然在 DialogOverviewExampleDialog 模板中你可以这样做：

   this is the text {{text }}

Plunker

我通常会做的是，我会创建一个我的组件可以理解的配置对象，然后我会在打开模式时传递它：

 private config = {
    title :"Hello there ",
    text :"What else ? "
 };

 openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.config = this.config;
    console.log('dialogRef',dialogRef);
  }

然后在模态组件内部：

<div class="my-modal">
   <h1>{{config.title}}</h1>
   <p>{{config.text}}</p>
</div>

将输入值传递给对话框组件

Passing input values to Dialog Component

angular

typescript

angular2-material