Angular Material 2 routerlink inside 数据表

Question

我有一个数据 table，我正在尝试在参与者名称 <td> 周围分配一个 <a>，当用户点击一个新组件时，它将带走用户。

<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 分配给 [=12] =] 有效。

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>

在您的打字稿代码中：

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

谢谢。

Answer 2

也可以这样使用，userId必须定义为angular变量

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

谢谢

Angular Material 2 routerlink inside 数据表

Angular Material 2 routerlink inside datatable

angular-ui-router

angular-material

angular-material2

angular6