Question

我试图将一些锚点（<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]？

Answer 1

您可以使用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

更新回答：

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

您希望阻止父路由器链接的点击行为。因此，您需要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。

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

1 个答案: