2016-09-04 5 views
4

を移動することなく、URLのオプションのパラメータ(行列表記)を変更/追加します。は、例えば、私はルータに追加のパラメータを追加するナビゲートする方法を知っている

this._router.navigate(['/users', { page: 2 }]); 

/users;page=2へのナビゲーションになります。

私がしたいのは、実際にナビゲートせずにこれらのパラメータを変更できることです。パラメータを更新/追加するためにURLを変更するだけです。

たとえば、テーブルを表示しているときに、ユーザーがソートキーを変更したり、フィルタを追加したりするときなどに便利です。

答えて

4

router.navigate()メソッドを使用してください。ルータは、同じコンポーネントにナビゲートするように要求していることを認識するので、実際にナビゲートすることなくパラメータを変更します。新しいパラメータを通知し、UIを更新することが

、あなたが観測ActivatedRoute.paramsを購読する:詳細はparams.subscribeon this pageため

import {ActivatedRoute} from '@angular/router'; 
... 
constructor(private route:ActivatedRoute){} 

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
    let page = +params['page']; // (+) converts string 'id' to a number 
    let sort = params['sort'] || 'ASC'; //use ASC order if none is supplied 
    this.updateUI(page,sort);//function would update component as you wish 
    }); 
} 

検索。

+0

これは私がすでにやっていることです、私はちょうどコンポーネントが毎回リロードされていると思っていました。説明をありがとう。 – AArias

+0

@AAriasコンストラクタまたは 'ngOnInit'の最上部に' console.log( 'New construction') 'を置くと、同じルートにナビゲートしても一度だけ呼び出されることに気づくはずです。 RC 5の怠惰なルートでこの動作を妨げるバグがありましたが、RC 6(https://github.com/angular/angular/issues/10841)で修正されているはずです。 – BeetleJuice

関連する問題