是否可以在routerLink中嵌套锚点？-Java 学习之路

我试图在一个更大的可点击元素（也是 <a> ）中放置一些锚点（ <a> 元素），这是一个routerLink .

简化布局：

<div>
  <a [routerLink]="['/details', item.id]">
    <div>Lots of visual elements...</div>
    <div><a href="https://wikipedia.org">click here for more info...</a></div>
  </a>
</div>

Simple Plunker example

看起来外部[routerLink]拦截其中的所有点击，因此维基百科链接仍然导航到详细信息视图，尽管它在悬停时显示维基百科地址 . 即使嵌套链接也是[routerLink]，也会发生同样的情况 .

有没有办法在点击嵌套链接时抑制外部[routerLink]？

1 回答

0
您可以使用div标记替换父锚标记，它将起作用：
```
<div>
  <div [routerLink]="['/details', item.id]">
    <div>Lots of visual elements...</div>
    <div><a href="https://wikipedia.org">click here for more info...</a></div>
  </div>
</div>
```
Updated Plunker

Updated answer:

因为您不想加载详细信息组件，所以您需要在此处执行更多操作：

您希望阻止父路由器链接的单击行为 . 所以你需要 event.stopPropagation see answers here .

所以你需要做的是：

在App-Component中创建一个函数 externalLink ：
```
externalLink(event, link: string){
    event.stopPropagation();
    window.location.href = link;
}
```
锚现在看起来像这样：
```
<a (click)="externalLink($event, 'https://wikipedia.org')">
    Nested external link: check wikipedia
</a>
```
看看Plunker .
回复于 2024-05-02T06:19:39+08:00

是否可以在routerLink中嵌套锚点？

1 回答

相关问题