首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使表行在Angular 2中表现为超链接

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

Stack Overflow用户
提问于 2018-08-07 01:14:59
回答 2查看 7.6K关注 0票数 4

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

代码语言:javascript
复制
<tr routerLink="/users/{{user.id}}">
  <!-- ... a bunch of cells with user name, etc -->
</tr>

这很好用,但由于它不是真正的HTML链接,它的行为并不完全像浏览器中的链接(例如,没有在新选项卡中打开链接的选项)。

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

有没有其他方法可以让表行表现得更像一个超链接?

EN

回答 2

Stack Overflow用户

发布于 2018-08-07 02:54:55

试着这样做。

你必须传递数组参数才能创建动态路由URL,你的情况在静态URL中工作得很好。请参考"https://angular.io/api/router/RouterLink

代码语言:javascript
复制
<tbody>
  <tr routerLink="[/user, user.id]">
    <td>John</td>
    <td>Doe</td>
    <td>john.doe@abc.com</td>
  </tr>
</tbody>
票数 7
EN

Stack Overflow用户

发布于 2018-08-07 01:22:38

试试这样的东西。在click function中,编写重定向逻辑。

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51712639

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档