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

Question

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

我想为所有“确认”类型的消息制作通用的对话框，开发人员可以根据业务需求输入对话框中的文本。但是根据 文档 ，没有这样的规定。我们是否有一种解决方法，或者我应该在 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);

- Sumit Agarwal

---

请发布您的代码。 - yurzui

@yurzui 添加了代码。 - Sumit Agarwal

请查看 https://dev59.com/ulsX5IYBdhLWcg3wHsdv#40185852，参考第8步。 - yurzui

谢谢@yurzui，我们在那里进行了讨论。我完全错过了它。 - Sumit Agarwal

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>

- Milad

---

谢谢。我需要在初始化组件之前传递参数。这里有另一个相关的线程，https://dev59.com/R1kR5IYBdhLWcg3w6RSo - sa_

工作得非常完美，兄弟，干杯！ - Dimitrios Filippou