angular – 将输入值传递给Dialog Component

发布时间：2020-12-17 06:55:59 所属栏目：安全来源：网络整理

导读：参见英文答案 Working example of Angular 2.0 Material MdDialog with Angular 2.0????????????????????????????????????1个我正在实现material2的对话框组件并面临这个问题：我想为所有确认类型的消息创建一个通用对话框,开发人员可以根据业务需求将文本

参见英文答案 > Working example of Angular 2.0 Material MdDialog with Angular 2.0????????????????????????????????????1个
我正在实现material2的对话框组件并面临这个问题：

我想为所有确认类型的消息创建一个通用对话框,开发人员可以根据业务需求将文本输入到对话框中.但根据docs,没有这样的规定.我们是否有相同的解决方法,或者我应该将其作为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);

解决方法

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!