routerLink内のネストされたアンカーは可能ですか？

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

は、ホバーにWikipediaのアドレスを表示するものの、Wikipediaのリンクがまだ詳細にナビゲートするように、内のすべてのクリックは、表示外部[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

---

更新答え：

あなたがいないため、詳細なコンポーネントを読み込み、ここで何かする必要があります：

親routerLinkのクリック動作を防止する必要があります。したがって、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。