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

我试图在一个更大的可点击元素（也是<a>）中放置一些锚（<a>元素），这是一个routerLink。是否可以在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]？

来源

2016-11-29 Andikki

您可以用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.stopPropagationsee answers here。

所以，你需要做的是这样的：

在App-组件创建一个功能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。

来源

2016-11-29 12:53:54

它至少在维基百科结束。但在它之前，它导航到外部链接（简要显示细节）。这可以在Plunker中看到，在我的实际应用中更加明显。此外，嵌套的[routerLink]不起作用。 – Andikki

请查看我的更新回答，我希望它可以帮助你;） –

它仍然不理想。为了让这个链接看起来像一个合适的链接，你需要离开'href =“https://wikipedia.org”'。这种方式可以通过惯用方式进行悬停和右键单击。然而，'ctrl + click'确实太多了 - 它做了'（click）'的操作 - 将当前页面更改为wikipedia - 并且还在新选项卡中打开了维基百科链接。所以你需要在你的方法中添加更多的逻辑，但这一切都变得非常麻烦。我想知道是否有更简单更优雅的解决方案。 – Andikki

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

回答

相关问题