コンポーネントからqueryParamsを更新(追加、削除)しようとしています。angularJSでは、.NETのおかげでそれが可能でした。
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
私は、ユーザーがフィルタリングや注文などができるリストを持つアプリを持っており、URLのqueryParamsに有効化されたすべてのフィルタを設定したいので、ユーザーはURLをコピー/ペーストしたり、誰かと共有したりすることができます。
しかし、フィルターが選択されるたびにページがリロードされるのは避けたいです。
これは新しいルーターで可能でしょうか?
新しいクエリ・パラメターを使って現在のルートにナビゲートすることができます。この場合、ページはリロードされませんが、クエリ・パラメターは更新されます。
こんな感じです(コンポーネント内)。
constructor(private router: Router) { }
public myMethodChangingQueryParams() {
const queryParams: Params = { myParam: 'myNewValue' };
this.router.navigate(
[],
{
relativeTo: activatedRoute,
queryParams: queryParams,
queryParamsHandling: 'merge', // remove to replace all query params by provided
});
}
注意していただきたいのは、これはページをリロードしませんが、ブラウザの履歴に新しいエントリをプッシュします。履歴に新しい値を追加するのではなく、置換したい場合には、{queryParams: queryParams, replaceUrl: true }
を使用することができます。
EDIT
すでにコメントで指摘されていますが、私の最初の例では []
と relativeTo
プロパティが抜けていたので、クエリパラムだけでなくルートも変更されてしまう可能性があります。適切な this.router.navigate
の使い方は、この場合になります。
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParams: { myParam: 'myNewValue' },
queryParamsHandling: 'merge'
});
新しいパラメータの値を null
に設定すると、URL からそのパラメータが削除されます。
Angular 5では、現在のURLを解析することで、urlTreeのコピーを簡単に取得・変更することができます。これには、クエリ・パラムやフラグメントが含まれます。
let urlTree = this.router.parseUrl(this.router.url);
urlTree.queryParams['newParamKey'] = 'newValue';
this.router.navigateByUrl(urlTree);
クエリパラメータを修正する正しい方法は、おそらく 以下のような createUrlTree は、現在の UrlTree から新しい UrlTree を作成する一方で、NavigationExtras を使って修正することができます。
import { Router } from '@angular/router';
constructor(private router: Router) { }
appendAQueryParam() {
const urlTree = this.router.createUrlTree([], {
queryParams: { newParamKey: 'newValue' },
queryParamsHandling: "merge",
preserveFragment: true });
this.router.navigateByUrl(urlTree);
}
この方法でクエリパラメータを削除するには、それを undefined
または null
に設定します。
ルートを変更せずにクエリのパラメータを変更したい場合は、以下を参照してください。 の例が参考になるでしょう。 現在のルートは/search です。 & 目標のルートは(ページをリロードしないで) :/search?query=love です。
submit(value: string) {
{ this.router.navigate( ['.'], { queryParams: { query: value } })
.then(_ => this.search(q));
}
search(keyword:any) {
//do some activity using }
注意: this.router.navigate( ['search'] の代わりに this.router.navigate( ['.'] を使用することができます。