Question

有没有更直观的方法来完成我在下面的工作？

我正在尝试创建一个通用的对话框组件，调用者可以通过传入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>

Dialog Typescript：

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) {}

}

调用程序Typescript：

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

Answer 1

为什么不在对话框Component中使用@Input Decorators 例如：

在对话框组件：

中

 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

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

1 个答案: