如何使表行在Angular 2中表现为超链接?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (236)

我有一个表行,当单击该表行时,它会将用户带到一个新页面:

<tr routerLink="/users/{{user.id}}">
  <!-- ... a bunch of cells with user name, etc -->
</tr>

这很好,但是由于它不是一个实际的HTML链接,它的行为并不完全像浏览器中的链接。

我试着把每个包的<td>元素中的<a>并使用CSS删除链接样式,它的行为类似于链接,但仅当鼠标位于表格单元格中的文本上时。

还有其他方法可以让表行更像超链接吗?

提问于
用户回答回答于

像这样试试。

为了创建动态路由URL,你必须传递数组参数,你的情况在静态URL中工作得很好。

<tbody>
  <tr routerLink="[/user, user.id]">
    <td>John</td>
    <td>Doe</td>
    <td>john.doe@abc.com</td>
  </tr>
</tbody>
用户回答回答于

试试这样的东西。在单击函数中,编写重定向的逻辑。

<tbody>
    <tr *ngFor="let car of pagedItems" (click)="editCar(car)">
      <th>{{ car.car_id }}</th>
      <td>{{ car.car_maker }}</td>
      <td>{{ car.car_model }}</td>
      <td>{{ car.car_year }}</td>
      <td><i class="material-icons" style="color:red" (click)="$event.stopPropagation();deleteCar(car.car_id)">delete_forever</i></td>
    </tr>
  </tbody>

扫码关注云+社区

领取腾讯云代金券