web-dev-qa-db-ja.com

テンプレートのrouterLinkにNavigationExtrasを渡す

Angular 2アプリでルーティングするときのURLの変更を無効にしたい。

_skipLocationChange: true_をNavigationExtrasパラメータとしてルーターに渡す必要があることを知っています。

私の質問は:

テンプレート内からrouterLinkにNavigationExtrasを渡すことは可能ですか?

私が試したこと:

_<h1>
  {{title}}
</h1>

<ul>
    <li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li>
    <li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li>
</ul>

<router-outlet></router-outlet>
_

しかし、それは機能しません。

リンクをクリックすると、ルートが_http://localhost:4200/route2;skipLocationChange=true_に変わります

コントローラでthis.router.navigate(['route1], {skipLocationChange: true)を使用したくないので、routerLinkAtiveの強調表示が失われます。

12

(今のところ、afaikで)routerLinkActiveskipLocationChangeの両方を同時に使用して、希望する結果を期待する方法はありません。 api に従ってオプションを追加できますが、skipLocationChangeオプションはありません。

ただし、ルーターからNavigationExtrasActivatedRoute と組み合わせて使用​​し、リンクをアクティブにするかどうかに基づいて使用できます

更新

2.3.0-beta.0skipLocationChangeオプションをrouterLinkディレクティブに追加できます:

<li><a [routerLink]="['route1']" skipLocationChange>Route1</a></li>
19
PierreDuc

routerLinkタグ自体に任意のNavigationExtrasプロパティを個別の属性として提供できます。

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

routerLink属性の documentation は明確です。

7
Yinon