是否可以在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內嵌套錨點？

回答

相關問題