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

Question

我有一个数据表，我正在尝试分配 <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>它有效。

Answer 1

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

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

谢谢。