1

Angular2 コンポーネントの他のコンポーネントをアウトレットに提供するために、複数の名前付きアウトレットと routerLinks があります。

<p><a [routerLink]="['1/1', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]"> Provide outlets 1/1</a></p>
<p><a [routerLink]="['1/2', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]"> Provide outlets 1/2</a></p>
<p><a [routerLink]="['1/3', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]"> Provide outlets 1/3</a></p>

<div class="flex-container">
    <div class="flex-item"><router-outlet></router-outlet></div>
    <div class="flex-item"><router-outlet name="articlesOutlet1"></router-outlet></div>
    <div class="flex-item"><router-outlet name="articlesOutlet2"></router-outlet></div>
</div>

アプリケーションが起動すると、最初のリンクの href は次のようになりました

/articles/1/1/(articlesOutlet1:記事//articlesOutlet2:ニュース)

このリンクをクリックした後、その href は

/articles/1/1/(1/1/(articlesOutlet1:article//articlesOutlet2:news)//articlesOutlet1:article//articlesOutlet2:news)

悪いリンクです。href を変更したくありません。達成する方法は？

完全な例はこちら http://plnkr.co/edit/EJOANe?p=preview

4

1 に答える 1

1

次のように routerLink を指定する場合:

[routerLink]="['/articles/1/1', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]

すべてが期待どおりに機能しています。

于 2016-10-19T11:18:26.283 に答える