在 Angular 中的組件之間傳遞模板引用

Question

我有一個包含子網格項組件的父網格組件。 我的大多數子網格項組件在單擊時導航到路由。 但是，我有一個孩子需要在單擊時打開模態窗口而不是導航。

我可以向我的子組件傳遞對模板#deactivateDialog的引用嗎？
當我需要模板本身時，我當前使用@Input route將其作為字符串發送。

家長：

<app-grid-item route="deactivateDialog" (navigationType)="openDialog($event)"></app-grid-item>
//more app-grid-items

<ng-template #deactivateDialog>
  //dialog markup
</ng-template>

---

openDialog(dialog) {
  //opening dialog
}

孩子：

<div (click)="navigate()">

---

@Input() route;
@Output() navigationType = new EventEmitter();

navigate() {
  this.navigationType.emit(this.route);
}

Answer 1

您可以將導航邏輯移動到 TypeScript 文件，並將 2 個參數傳遞給函數：

1. 導航的路線（如果它不是應該打開對話框的項目）
2. true/false（如果您應該導航，則為 true，如果您必須打開對話框，則為 false）

<ng-template #deactivateDialog>
  //dialog markup
</ng-template>

<app-grid-item (click)="custom_function('route_to_navigate', true)"></app-grid-item>

現在在 TypeScript 文件中創建custom_function() ，它將檢查您是否應該導航或應該打開對話框。

custom_function(route_to_navigate, is_navigating){
  if (is_navigating){
    this.router.navigate([route_to_navigate]);
  } else {
    // Open dialog
  }
}