2016-09-08 9 views
10

連絡先リストを表示する/contactsに登録されているコンポーネントがあります。表示されたリストをフィルタリングするために<input [value]="searchString">を追加しました。角度2の新しいルータ:クエリパラメータの変更/設定


今私は、クエリのParamの形式でURL内のsearchStringを表示したいと思います。

公式ドキュメント(https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters)がqueryParamsを変更するためのrouter.navigateを使用する方法を示し(新しいルータの3.0.0 RC2を使用)。 router.navigate(['/contacts'], {queryParams:{foo:42}})

(私は、私はちょうどqueryParamsを変更していた場合、それはコンポーネントを再ロードしないことを知っている:私はちょうどで私は現在よどのルートを知ることなく、queryParamsを変更したいので、しかし、これは、厄介なようですそれでも、これは書く権利を感じていない)私はrouter.navigate([], {queryParams:{foo:42}})動作することを考え出したいくつかの試みの後


。これは良い感じです。

しかし、私はそれが正しい方法であるかどうかまだ分かりません。または、私はこれのためのいくつかの方法を逃した場合。


queryParamsをどのように変更しますか?

+0

あなたのルータファイルの '/ contacts /:search-query'のようなルートパラメータに検索クエリを入れて、あなたのコンポーネントで変更を監視する方法はありますか? – mrgoos

+0

これは違いがありますか?私は 'queryParams'も見ることができますが、それは問題ではありません。 '...'私の現在のコンポーネントは約20の検索パラメータを持っていますが、それらの大部分はオプションであり、いくつかは互いに排除します。ユーザーがパラメータを変更すると、表示されたリストにフィルタが適用され、さらにこれらのパラメータの変更がURL内に反映されます。 '' '' 'queryParams'を設定する正しい方法は何ですか?*または*" router.navigate([]、...)は唯一の正しい方法ですか? "* –

+1

答えをありがとう、それは私を助けた。私はrouter.navigate([]、{queryParams:{...}})も使用しています。 – skovmand

答えて

12

あなたはルータのクラス宣言に見た場合、あなたはそれを見つけることができます:

移動コマンドの提供アレイと出発点に基づきます。 開始ルートが指定されていない場合、ナビゲーションは絶対的です。

また、ナビゲーションが成功した場合には値で約束を返します。

navigate(コマンド:any []、extras ?: NavigationExtras):Promise;

コマンド - ルータへのコマンドの配列。

エキストラ - あなたは、クエリのような追加のプロパティを指定するオプションのパラメータを使用すると、NavigationExtrasクラスに見ればあなただけでなく、ルータにクエリパラメータを指定することができることがわかります

パラメータだけでなく、以前のクエリパラメータなどを保存する設定しました。

私はこのような移動方法を使用する:空の配列は、位置が変化し、エクストラでないことを意味

this.router.navigate([], { 
     queryParams: objectWithProperties, 
     relativeTo: this.activeRoute 
    }); 

私はプロパティを持つオブジェクトを使ってクエリパラメータを定義します。このような何かにオブジェクト

角度解決します

siteBasePath/routerDirectory?ここでpropertyNameの= PropertyValueを

私は非常に有用であることが分かっより有用な情報と例を示します。http://vsavkin.tumblr.com/post/145672529346/angular-router

私は誰かがこれが役立つことを願っています。

+0

これは良いです。唯一の欠点は 'ngOnInit'を引き起こさないことです。したがって、queryParameterが変更され、api呼び出しを行う必要がある場合は、イベントをルーティングする必要があります。これは正しいです? – DAG

+1

Observablesを使用する場合は、ngOnInitでこれを行うことができます。元の質問にコードを投稿します:https://stackoverflow.com/questions/44930868/angular-navigate-to-url-by-replacing-an-existing-parameter?noredirect=1#comment76838644_44930868 – DeborahK

関連する問題