Question

在我的业务应用程序中，我要求选择列表中的记录，更新记录数据，选择列表中的下一项，等等。

用例1 在列表中选择项目，打开一个对话框，在其中操作数据，然后返回列表

用例2 导航到页面（通过路由器），在那儿操纵数据，然后从那儿进一步导航

所以我要避免的是两次实施我的业务组件。第一次使其与对话框配合使用，第二次使其与“常规”组件类似，例如通过解析器等预取数据。

任何人都可以告诉我，最佳实践是什么？ 将组件与路由器一起使用，并在对话框中将其打开

我在这里找到了这个==> Dynamically load a component inside a Material MatDialog

但是例如这没有回答如何处理预取（解析程序）。据我所知，对话框没有使用路由解析器。

预先感谢

Answer 1

如果您正在使用Angular Material，则可以通过向@Optional()添加@Inject(MAT_DIALOG_DATA)装饰器来重用业务组件。因此，您的可重用组件看起来像：

export class MyBusinessComponent implements OnInit {
  data: any;
  constructor(
   @Optional() @Inject(MAT_DIALOG_DATA) private dialogData: any,
   private route: ActivatedRoute
  ) {
    this.data = dialogData ? dialogData : null;
  }

  ngOnInit() {
    if (dialogData) {
      this.data = dialogData
    } else {
      this.data = this._route.snapshot.data
    }
  }
}

要将组件用作对话框时，请输入：

const dialogRef = this.dialog.open(PriceBreakupSectionComponent, { data: { somedata: 'somevalue' } })

在角度，材质上重用对话框中的组件的最佳实践？

1 个答案: