在對話框中重用組件的角度、材料的最佳實踐？

Question

在我的業務應用程序中，我需要選擇列表中的記錄、更新記錄數據、選擇列表中的下一項，等等。

用例 1選擇列表中的項目，打開一個對話框，在那里操作數據，然后返回列表

用例 2導航到頁面（通過路由器），在那里操作數據，從那里進一步導航

所以我想避免的是兩次實現我的業務組件。 第一次使其與對話框一起工作，第二次使其表現得像一個“正常”組件，例如通過解析器預取數據等。

任何人都可以告訴我以角度執行此操作的最佳做​​法是什么？ 將組件與路由器一起使用並在對話框中打開它

我在這里找到了這個==> 在 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' } })