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

<分区>

我正在实现 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 会给你组件实例，意味着你可以像这样注入(inject)任何你想要的东西:

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>

关于angular - 将输入值传递给对话框组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41357021/

上一篇：angular - 试图了解 CanActivate 和 CanActivateChild 之间的区别

下一篇：c# - 对预检请求的响应未通过访问控制检查(Angular2)

angular - mergeMap 中与 @ngrx 的并行操作？

node.js - Typescript 和 Googleapis 使用的内存激增

typescript - 如何使用 Typescript 语言服务获取属性信息

Angular2 Material 访问选项卡值

Angular2 Material : Md-Menu opens below router outlet

angular - Angular 中共享模块的理想大小

angular - 共享服务中的私有(private)主题与公共(public)只读主题

typescript - 以正确的方式避免循环依赖 - NestJS

angular - Material 2 : Show/Hide md-sidenav depending on media