如何将数据传递给通用角度组件（对话框）答案

【问题标题】：How to pass data to a generic angular component (dialog)如何将数据传递给通用角度组件（对话框）
【发布时间】：2018-04-26 16:39:30
【问题描述】：

有没有更直观的方法来完成我下面的内容？

我正在尝试制作一个通用对话框组件，调用者可以通过传入 setupParam 类对其进行自定义。

我还是 Angular 世界的新手，虽然下面的代码可以按我的意愿运行，但对于其他开发人员来说，需要 setupParam 类并不是很直观。

对话框 HTML：

<div>
  <h2 mat-dialog-title>{{setupParams.title}}</h2>
  <mat-dialog-content>
    <ng-content></ng-content>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-raised mat-dialog-close [mat-dialog-close]="false">{{setupParams.button1}}</button>
    <button mat-raised [mat-dialog-close]="true">{{setupParams.button2}}</button>
  </mat-dialog-actions>
</div>

对话框打字稿：

export class DialogGeneric {

  public setupParams: GenericDialogProperties;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.setupParams = data.dialogParams;
  }
    //public dialogRef: MatDialogRef<DialogGeneric>, @Inject(MAT_DIALOG_DATA) public data: any) {}

}

调用程序打字稿：

  myMethod(id) {
    let myDialog = this.dialog.open(MyDialog, {
      height: "400px", width: "400px",
      data: { someData: "some data", dialogParams: this.modalSetup },
  });

【问题讨论】：

什么对你来说更直观？
调用对话框时需要的东西。现在他们什么都不能传递给它，对话框大部分都是空的。

标签： angular angular-material

【解决方案1】：

为什么不在你的对话框组件中使用@Input 装饰器示例：

在对话框组件中：

 import { Component, Input } from '@angular/core';
    @Component({
    .....
    })
    export class DialogComponent{
       @Input() data: any;
    }

在父组件中：

<dialog [data]='dataObject'>

dataObject 是一个对象，您将在父类中填写要在对话框中显示的文本、标题、图像

dataObject = {
    title: 'Title',
    text: 'Some question or any text' 
}

Documentation and full example

【讨论】：