单击using 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中的当前代理对象。是否有可能或有其他标准方法来实现这一点?

@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来进行导航。你可以注入Router服务并调用导航方法。(实际上，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>

在组件类中注入Router并在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}`),
});
}