web-dev-qa-db-ja.com

Angular 2-プッシュする代わりに履歴を置き換える

angular 2の新しいルーター（rc.1）で新しいものをプッシュする代わりに、履歴を置き換える方法は？

たとえば、質問リスト内のIm（/questions）新しいルートで新しいモーダルを開く（/questions/add）、新しい質問を追加した後、質問ビューに移動します（/questions/1）。後ろに押すと、/questions の代わりに /questions/add

angulartypescriptangular2-routing
32
pleerock

使用する場合

router.navigate

その後

location.replaceState

まったく同じパスを使用して、通常発生する変更をトリガーしたり、履歴を置き換えたりできます。

たとえば、あなたの場合：

this.router.navigate(['questions/1']);
this.location.replaceState('questions/1');

ルートにパラメーターを追加する必要がある場合は、場所のURLを作成できます

router.serializeUrl(router.createUrlTree(/* what you put in your router navigate call */));

あなたの例では：

this.router.navigate(['questions/1', {name:"test"}]);
this.location.replaceState(this.router.serializeUrl(this.router.createUrlTree(['questions/1', {name:"test"}])));

更新

angularルーターには RLオプションの置き換え が付属しているようです。あなたの例では：

this.router.navigate(["questions/1"], {replaceUrl:true});

更新2

現在の issue があり、短時間で複数のナビゲーションを行ってもURLが正しく置き換えられない場合があります。一時的な回避策として、ナビゲート関数をタイムアウトでラップして、それぞれを個別のサイクルで起動します。

setTimeout(()=>{
    this.router.navigate(["questions/1"], {replaceUrl:true});
});
67
Jason

LocationsクラスのreplaceStateを使用したい

https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#replaceState-anchor

3
Gary