angular-ui-router - 数据表内的Angular Material 2 routerlink

我有一个数据表，我正在尝试围绕参与者名称 <a> 分配一个 <td>，当用户单击新组件时，该名称将引导用户。

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let Participant"> <a routerlink="/participants/userId">{{Participant.name}}</a> </td>
</ng-container>

它没有显示错误或任何内容，但是，它没有使 <td> 可点击，它完全忽略了 routerLink ，如果我将 href 分配给它工作的 <a> 。

最佳答案

处理此问题的一种方法是基于 (click) 事件。

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let Participant">
  <span style="cusor:pointer;" (click)="navigate(Participant)">
        {{Participant.name}}</span>  </td>
</ng-container>

在您的 typescript 代码中:

private navigate(product){
  this.router.navigate(['/participants', product]); //we can send product object as route param
}

谢谢。

关于angular-ui-router - 数据表内的Angular Material 2 routerlink，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51229105/