web-dev-qa-db-ja.com

Angular：ルートを変更せずにqueryParamsを更新する方法

コンポーネントからqueryParamsを更新（追加、削除）しようとしています。 angularJSでは、以前は次のような理由で可能でした。

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

私は、ユーザーがフィルタリング、注文などができるリストを持つアプリを持っています、そして、私は彼がURLをコピー/貼り付けまたは他の誰かとそれを共有できるようにURLのqueryParamsに有効にしたいです。

ただし、フィルタが選択されるたびにページをリロードしたくない。

これは新しいルータでも可能ですか？

angularquery-parametersangular-router
64
Olivier

あなたはあなたのページをリロードしないでしょうが、クエリパラメータを更新するでしょう新しいクエリパラメータで現在のルートにナビゲートすることができます。

（コンポーネント内）のようなもの：

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 }を使用できます。

編集：すでにコメントで指摘したように、私のオリジナルの例では[]とrelativeToプロパティが欠けていたので、パラメータを問い合わせるだけではなく、経路も変更することができました。適切なthis.router.navigateの使用法は、この場合です。

this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: "merge"
  });

新しいパラメータ値をnullに設定すると、URLからパラメータが削除されます。

156
Radosław Roszkowiak

@RadosławRoszkowiakの答えは、relativeTo: this.routeが以下のように必要であることを除けば、ほぼ正しいです。

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

changeQuery() {
  this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
}
13
Robert

Angular 5では、現在のURLを解析することで rlTree のコピーを簡単に取得および変更できます。これには、クエリパラメータとフラグメントが含まれます。

  let urlTree = this.router.parseUrl(this.router.url);
  urlTree.queryParams['newParamKey'] = 'newValue';

  this.router.navigateByUrl(urlTree);

クエリパラメータを変更する「正しい方法」は、おそらく createUrlTree を使用することです。これは、 NavigationExtras を使用して現在のUrlTreeを変更しながら作成します。

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に設定します。

9
bjornalm

ルートを変更せずにクエリパラメータを変更したい場合。下記の例を参考にしてください。現在のルートは：/ 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（['。']の代わりにthis.router.navigate（['search']を使うことができます。

4
Azeem Chauhan

ほとんどの投票の答えは部分的に私のために働きました。ブラウザのURLは変わりませんが、ナビゲーション後にrouterLinkActiveが機能しなくなりました。

私の解決策はlotation.goを使うことでした：

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

export class whateverComponent {
  constructor(private readonly location: Location, private readonly router: Router) {}

  addQueryString() {
    const params = new HttpParams();
    params.append("param1", "value1");
    params.append("param2", "value2");
    this.location.go(this.router.url.split("?")[0], params.toString());
  }
}

HttpClientで情報を送信するためにクエリ文字列を既に使用していたので、HttpParamsを使用してクエリ文字列を作成しました。しかし、あなたはそれを自分で作ることができます。

this._router.url.split("?")[0]は、現在のURLから以前のすべてのクエリ文字列を削除します。

2
moi_meme

やってみる

this.router.navigate([], { 
  queryParams: {
    query: value
  }
});

一重引用符以外の同じルートナビゲーションでも機能します。

1
Prudhvi Raj

まず、Angularルーターからルーターモジュールをインポートし、そのエイリアス名を宣言する必要があります。

import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}

1.「router.navigate」関数を使用してクエリパラメータを変更し、クエリパラメータを渡すことができます。

this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
});

現在アクティブになっているルートのクエリパラメータを更新します。

  1. 下記は_id、day、nameをクエリパラメータとしてabcページにリダイレクトします。

    this.router.navigate（['/ abc']、{queryParams：{_id： "abc"、日にち： "1"、name： "dfd"}}）;

    3つのクエリパラメータとともに "abc"ルートのクエリパラメータを更新します。

クエリパラメータを取得する場合： - 

    import { ActivatedRoute } from '@angular/router'; //import activated routed

    export class ABC implements OnInit {

    constructor(
        private route: ActivatedRoute //declare its alias name
      ) {}

    ngOnInit(){
       console.log(this.route.snapshot.queryParamMap.get('_id')); //this will fetch the query params
    }
0
VIKAS KOHLI