使用 HostListener 單擊后動態設置 routerlink 值

Question

在 Angular 應用程序中，有一個網格，其中第一列是 Name，routerLink 值根據運行時 API 調用及其返回類型決定。 如下圖所示：

<tr *ngFor="let a of sliceList; trackBy: trackById">
      <td>
        <app-agency-state [Agency]="a"></app-agency-state><span>Name</span>
        <a [routerLink]="agencyLink(a)" style="cursor: pointer">{{a.name}}</a>
      </td>
</tr>

我們有 hostlistener，我們嘗試使用 HTTP 調用獲取 URL，並且我們只想在此處設置 routerlink 值。 並且，我們還需要獲取當前在Hostlistner中的點擊值即當前代理object。 是否有可能或有另一種標准方法來實現這一目標？

@HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    this.agencyService.getArchive(a.id).subscribe(
      res => {
        a.href = `/dashboard/agenecy/archived/${a.id}`;
      },
      err => {
        a.href = `/dashboard/agency/${a.id}`;
      });
  }

Answer 1

您不需要總是使用 routerLink 來執行導航。 您可以注入路由器服務並調用導航方法。 （實際上，routerLink 指令做同樣的事情。）刪除routerLink指令，而是調用您的 onClick 方法：

<tr *ngFor="let a of sliceList; trackBy: trackById">
      <td>
        <app-agency-state [Agency]="a"></app-agency-state><span>Name</span>
        <span (click)="onClick(a)" style="cursor: pointer">{{a.name}}</span>
      </td>
</tr>

並在組件 class 中注入路由器並在 onClick 方法中進行導航

constructor(private router: Router) {}

onClick(a: Agency) {
    this.agencyService.getArchive(a.id).subscribe(
      res => this.router.navigate(`/dashboard/agency/archived/${a.id}`),
      err => this.router.navigate(`/dashboard/agency/${a.id}`),
      });
  }