web-dev-qa-db-ja.com

角度2でリロードせずにルートパラメータを変更する

私は角度2、グーグルマップなどを使って不動産ウェブサイトを作っています、そしてユーザーが地図の中心を変えるとき、私は地図の現在の位置と半径を示すapiに検索を実行します。つまり、ページ全体をリロードすることなく、これらの値をURLに反映させたいのです。それは可能ですか？ AngularJS 1.xを使った解決策はいくつか見つかりましたが、Angular 2については何もありません。

javascriptangularroutesangular2-routing
75
Marcos Basualdo

あなたは基本的にあなたのURLを変えるlocation.go(url)を使うことができました、アプリケーションのルートの変更なしで。

NOTEこれは現在のルートから子ルートへのリダイレクトのような他の効果を引き起こす可能性があります。

location.goを記述している 関連質問 はRouterに親密にならないので変更が起こります。

62
Pankaj Parkar

RC6以降では、状態を変更せずにURLを変更するために次のことを行うことができます。これにより、経路履歴を維持することができます。

import {OnInit} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.replaceState("/some/newstate/");
  }
}
65
user590696

location.go(url)を使用するのがよい方法ですが、URLをハードコーディングする代わりに、router.createUrlTree()を使用して生成することを検討してください。

this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})というルーター呼び出しを行いたいが、コンポーネントをリロードしなくても、次のように書き換えることができます。

const url = this
        .router
        .createUrlTree([{param: 1}], {relativeTo: this.activatedRoute})
        .toString();

 this.location.go(url);
41
golfadas

これをRCxのangular2リリースで動作させるのに大きな問題がありました。 Locationパッケージは移動しており、constructor（）内でlocation.go（）を実行しても動作しません。ライフサイクルのngOnInit（）以降である必要があります。これがいくつかのコード例です：

import {OnInit} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.go( '/example;example_param=917' );
  }
}

ここで問題に関する角度のリソースがあります： https://angular.io/docs/ts/latest/api/common/index/Location-class.htmlhttps：//角度.io/docs/ts/latest/api/common/index/LocationStrategy-class.html

7
Luke Dupin

この質問を見つけた私のような人にとっては、次のものが役に立つかもしれません。

私は同様の問題を抱えていて、最初にここで他の答えで示唆されるようにlocation.goとlocation.replaceStateを使ってみました。しかし、ナビゲーションは現在のルートを基準にしたものであり、現在のルートはlocation.goまたはlocation.replaceStateによって更新されていないため、アプリ上の別のページに移動する必要があるときに問題に遭遇しました。これらがURLに与える影響について）

本質的には、routeパラメータが変更されたがDIDがルート状態を内部的に更新したときにページ/コンポーネントをリロードしないという解決策が必要でした。

クエリパラメータを使用しました。あなたはここでそれについての詳細を見つけることができます： https://angular-2-training-book.rangle.io/handout/routing/query_params.html

したがって、注文を保存して注文IDを取得するなどの作業が必要な場合は、次のようにページのURLを更新できます。地図上の中心位置と関連データの更新も同様です。

// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
    // [Here we would call back-end to save the order in the database]

    this.router.navigate(['orders'], { queryParams: { id: orderId } });
    // now the URL is blah/orders?id:1234. We don't reload the orders
    // page or component so get desired behaviour of not seeing any 
    // flickers or resetting the page.
}

次のようにngOnInitメソッド内でそれを追跡します。

ngOnInit() {
    this.orderId = this.route
        .queryParamMap
        .map(params => params.get('id') || null);
    // orderID is up-to-date with what is saved in database now, or if
    // nothing is saved and hence no id query paramter the orderId variable
    // is simply null.
    // [You can load the order here from its ID if this suits your design]
}

新しい（未保存の）注文で注文ページに直接移動する必要がある場合は、次のようにします。

this.router.navigate(['orders']);

既存の（保存された）注文の注文ページに直接移動する必要がある場合は、次のようにします。

this.router.navigate(['orders'], { queryParams: { id: '1234' } });
7
TornadoAli

私はそれを得るためにこの方法を使います：

const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};

this.location.replaceState(
  this.router.createUrlTree(
    [this.locationStrategy.path().split('?')[0]], // Get uri
    {queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
  ).toString()
);

- 編集 -

私はこれについてもう少し情報を追加すべきだと思います。

あなたがあなたのアプリケーションのthis.location.replaceState()ルータを使用している場合は更新されないので、後でルータ情報を使用する場合はブラウザのこれと同じではありません。たとえば、言語を変更するためにlocalizeServiceを使用する場合、言語をアプリケーションの最後のURLに切り替えた後、アプリケーションをthis.location.replaceState()で変更します。

この動作を望まないのであれば、URLを更新するために別の方法を選ぶことができます。

this.router.navigate(
  [this.locationStrategy.path().split('?')[0]],
  {queryParams: queryParamsObj}
);

このオプションでは、ブラウザも更新されませんが、URLの変更はアプリケーションのRouterにも注入されるので、言語を切り替えたときにthis.location.replaceState()のような問題は発生しません。

もちろん、あなたはあなたのニーズに合った方法を選ぶことができます。ブラウザでURLを変更する以上にアプリケーションを使用しないため、最初の方法はより軽量です。

3
kris_IV

私にとっては、それは実際には両方ともAngular 4.4.5との組み合わせでした。

Router.navigateを使用して、realtiveTo：activatedRoute部分を尊重しないことで、私のURLを破壊し続けました。

私は終わった：

this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())
2
Patrick P.