Angular/Html - 如何使整个单元格可点击？答案

【问题标题】：Angular/Html - How to make a whole cell clickable?Angular/Html - 如何使整个单元格可点击？
【发布时间】：2021-08-01 16:15:11
【问题描述】：

我有一张桌子，我希望每次有人点击一个单元格时，它都会打开一个新选项卡，引导另一条路线。我已经设法用单元格中的一个按钮来做到这一点，我的元素有一个类“按钮”，并且在我的元素内，但是当我删除类按钮并想让整个单元格可点击时它不起作用。

<td
 <a *ngIf="isClickable()" [routerLink]="['/', lang, 'toto']"
                          [queryParams]="this.detailParams(param1, param2)"
                          target="_blank"></a>
</td>

知道如何实现吗？我想将选项卡和路由器链接等的目标保留为空白。我已经试过了：

td a {
    display:block;
    width:100%;
}

它不会改变任何事情。

提前致谢。

【问题讨论】：

使用点击 td 而不是内部标签
我进行了一些编辑，使其更清晰，但正如我所说，我想保留路由器链接，而不是使用点击
啊同事发现了一招，加了一个在标签中：D 已经解决了，谢谢

标签： html css angular html-table routerlink

【解决方案1】：

这就是你应该如何处理你的问题。在“td”标签中使用 Angular（单击）事件，而不是在单元格中放置“a”。单元格中的“a”仅链接您的单元格内容，而不是整个 html 标记。

<td (click)="yourFunction()"> Content </td>

如果您想在“td”标签上使用链接，您可以通过添加 [routerLink] 来实现。

<td [routerLink]="your_link"> Content </td>

请注意，因为 [routerLink] 仅适用于 Angular 应用程序中的路由。如果路由到外部链接，您应该使用 href 和安全链接。

【讨论】：