Angular点击后动态设置routerLink值的可行方案问询

原方案的问题 #

• onClick方法里的a对象未定义，无法直接获取当前点击的agency实例，需要额外处理事件源关联数据，实现繁琐且易出错。
• 即便成功获取a并设置href，由于routerLink绑定的是agencyLink(a)，若该方法未读取a.href，路由不会自动更新；且点击a标签会立即触发默认导航，此时异步请求尚未完成，后续修改href对本次导航无意义。
• @HostListener('click')会监听整个组件宿主的点击事件，点击表格单元格内的其他元素（如<app-agency-state>）也会触发请求，造成不必要的资源消耗。

标准实现方式 #

方式一：点击时发起请求，手动触发路由导航 #

直接跳过routerLink，在点击事件中完成请求后手动调用路由服务导航，逻辑更清晰：

模板修改：

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

组件代码：

import { Router } from '@angular/router';

constructor(private router: Router, private agencyService: AgencyService) {}

navigateToAgency(a: any) {
  this.agencyService.getArchive(a.id).subscribe({
    next: () => {
      this.router.navigate(['/dashboard/agency/archived', a.id]);
    },
    error: () => {
      this.router.navigate(['/dashboard/agency', a.id]);
    }
  });
}

方式二：预加载状态，提前计算路由 #

如果允许提前获取所有agency的状态，可以在组件初始化时批量请求，之后直接通过routerLink绑定计算后的路由，用户点击时无需等待请求：

组件代码：

ngOnInit() {
  this.sliceList.forEach(agency => {
    this.agencyService.getArchive(agency.id).subscribe({
      next: () => agency.isArchived = true,
      error: () => agency.isArchived = false
    });
  });
}

agencyLink(a: any) {
  return a.isArchived ? ['/dashboard/agency/archived', a.id] : ['/dashboard/agency', a.id];
}

模板保留原routerLink绑定：

<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>

注意：如果sliceList数据量较大，批量发起请求可能影响性能，建议改为批量查询接口或添加请求缓存。

内容的提问来源于stack exchange，提问作者Mayank Gupta