将输入值传递给Dialog Component

时间:2016-12-28 07:06:27

标签: angular angular2-material

我正在实现material2的对话框组件并面临这个问题:

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

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

这样打电话:

{{1}}

1 个答案:

答案 0 :(得分:16)

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

我通常会做什么,我创建了一个我的Component理解的配置对象,然后在打开模态时我会通过它:

 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>