web-dev-qa-db-ja.com

URLからクエリパラメータを取得する方法 Angular 2？

私はangular2.0.0-beta7を使います。コンポーネントが/path?query=value1のようなパスにロードされると、コンポーネントは/pathにリダイレクトされます。 GETパラメーターが削除されたのはなぜですか？パラメータを保存する方法

ルータにエラーがあります。私のようなメインルートがある場合

@RouteConfig([
  {
      path: '/todos/...',
      name: 'TodoMain',
      component: TodoMainComponent
  }
])

と私の子供のルートが好き

@RouteConfig([
  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])

それなら私はTodoListComponentでパラメータを取得できません。私は得ることができます

params("/my/path;param1=value1;param2=value2")

しかし私は古典が欲しい

query params("/my/path?param1=value1&param2=value2")
typescriptangular
188
FireGM

ActivatedRouteのインスタンスを注入することで、queryParamsやparamsオブザーバブルを含むさまざまなオブザーバブルを購読することができます。

import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

購読中止に関するメモ

@Retoと@ codef0rmerは、公式の文書によると、components unsubscribe()メソッド内のonDestroy()はこのインスタンスでは不要であることを非常に正しく指摘していました。これは私のコードサンプルから削除されました。 （ this チュートリアルの登録解除が必要ですか？セクションを参照してください）

356
Stephen Paul

このようなURLのとき http://stackoverflow.com?param1=value

次のコードでparam1を取得できます。

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
    selector: '',
    templateUrl: './abc.html',
    styleUrls: ['./abc.less']
})
export class AbcComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        // get param
        let param1 = this.route.snapshot.queryParams["param1"];
    }
}
83
Trung

質問がversion beta 7 を指定していても、この質問は Angular 2クエリパラメータ のような一般的なフレーズについてGoogleでトップの検索結果として表示されます。そのため、最新のルーター（現在は alpha 7 に入っています）に対する答えがここにあります。

パラメータの読み方が劇的に変わりました。まず、Routerという依存関係をコンストラクタのパラメータに挿入する必要があります。

constructor(private router: Router) { }

その後、ngOnInitメソッドでクエリパラメータを購読することができます（コンストラクタも大丈夫ですが、テストのためにngOnInitを使用する必要があります）。

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

この例では、example.com?id=41のようなURLからクエリパラメータ id を読みます。

注意すべきことがまだいくつかあります。

  1. params['id']のようにparamsのプロパティにアクセスすると、常に 文字列 が返されます。これに+を付けることで number に変換できます。
  2. クエリパラメータがobservableで取得されるのは、新しいコンポーネントをロードする代わりに同じコンポーネントインスタンスを再利用できるからです。クエリパラメータが変更されるたびに、それは私たちが購読している新しいイベントの原因となるので、それに応じて変更に反応することができます。
32
Roope Hakulinen

私は@ StevePaulの回答が本当に気に入りましたが、無関係の購読/購読中止の電話をかけなくても同じことができます。

import { ActivatedRoute } from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
    let params: any = this.activatedRoute.snapshot.params;
    console.log(params.id);
    // or shortcut Type Casting
    // (<any> this.activatedRoute.snapshot.params).id
}
26
codef0rmer

クエリパラメータを送信する

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

クエリパラメータを受け取る

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

公式ソース

15
dddenis

こんにちはあなたはURLSearchParamsを使用することができます、あなたはそれについての詳細を読むことができます ここ 。

インポート：

import {URLSearchParams} from "@angular/http";

そして機能：

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

Notice ：すべてのプラットフォームでサポートされているわけではなく、角度付きドキュメントでは "実験"状態になっているようです

11
Asaf Hananel

まず最初に、Angular 2を使って作業したところ、クエリ文字列を含むURLは/path;query=value1になります。

あなたが使用するコンポーネントの中でそれにアクセスするためにこれはそうです、しかし今コードブロックに従います：

    constructor(params: RouteParams){
    var val = params.get("query");
    }

コンポーネントをロードしたときになぜそれが削除されるのかということに関しては、それはデフォルトの振る舞いではありません。私は特にクリーンなテストプロジェクトをチェックし、リダイレクトも変更もしませんでした。それはデフォルトルートなのか、それともルーティングに関して特別なものなのか。

https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters にあるAngular 2チュートリアルで、クエリ文字列とパラメータを使用したルーティングについてお読みください。

7
Namirna

以下に示すようにActivatedRouteを使用してURLで渡されると、クエリパラメータを取得できます。

uRL： - http：/domain.com？test = abc

import { Component } from '@angular/core';
import { ActivatedRoute }     from '@angular/router';

@Component({
  selector: 'my-home'
})
export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) { 
    route.queryParams.subscribe(
      data => console.log('queryParams', data['test']));
  }

}
7
Saurabh

オブジェクトとしてURLパラメータを取得します。

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}
5
Jsonras

今です：

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});
2
Alan

クエリパラメータを一度だけ取得したい場合は、 take methodを使用するのが最善の方法です。そのため、登録解除の心配はありません。これが簡単なスニペットです： - 

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

注： 削除 take（1） 将来パラメータ値を使用する場合。

2
Abhishek Chandel

あなたはただコンストラクタにActivatedRouteを注入する必要がありますそしてそれからちょうどparamsかqueryParamsにアクセスする 

constructor(private route:ActivatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

いくつかのケースではNgOnInitで何もしていません...おそらくこのケースではparamsの初期化前のinit呼び出しのために関数debounceTime（1000）を使ってobservableにしばらく待つように依頼することでこれを達成できます。

例=>

 constructor(private route:ActivatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime（）別の発生源の放出なしに特定の期間が経過した後にのみ観察可能な発生源から値を放出します

1
Rajiv

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

上記の質問は、ページがリダイレクトされた後にクエリパラメータ値が必要であると述べており、スナップショット値（観察不可能な代替方法）で十分であると考えることができます。

公式ドキュメント からsnapshot.paramMap.getについてここで言及した人はいません。

this.route.snapshot.paramMap.get('id')

それで送信する前に、送信/リダイレクトコンポーネントにこれを追加します。

import { Router } from '@angular/router';

それから（文書化された ここ のように）リダイレクトしてください：

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

または単に：

this.router.navigate(['/heroes', heroId ]);

文書化されているようにルーティングモジュールにこれを追加したことを確認してください ここ ：

 { path: 'hero/:id', component: HeroDetailComponent }

そして最後に、クエリパラメータを使用する必要があるコンポーネントで

  • インポートを追加します（文書化された ここ ）：

    import { Router, ActivatedRoute, ParamMap } from '@angular/router';

  • activatedRouteを注入する

（ドキュメンテーションはswitchMapもインポートし、RouterとHeroServiceもインジェクトします - ただし、それらは観察可能な代替手段にのみ必要です - 私たちの場合のようにスナップショット代替手段を使用する場合には必要ありません）。

    constructor(
      private route: ActivatedRoute
    ) {}

  • そしてあなたが必要とする価値を手に入れなさい（文書化された ここ ）：

    ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
}

注：ROUTING-MODULEをFEATURE MODULE（文書に表示されているように）に追加する場合、APPRModule（またはルートレベルのアプリケーション経路を持つ他のファイル）の前にAPP.MODULE.tsがあることを確認します。それ以外の機能のルートは見つかりません（{path： '**'、redirectTo： '/ not-found'}の後に来ると、not-foundメッセージしか表示されません）。

1
Ula

それがルートで定義されていない場合、あなたはRouterStateからパラメータを取得することはできません、あなたの例では、あなたはクエリ文字列を解析する必要があります...

これが私が使ったコードです：

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);
0
Julien Ricard

Steve Paulの解決法のバリエーションです。不要なivarsを避けるため、ngOnDestroyの間にunsubscribe()呼び出しをする必要がなくなり、take(1)を使ってobservableを購読するだけで、最初の値の後に自動的に解放されます。

import 'rxjs/add/operator/take';
import {Router, ActivatedRoute} from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.take(1).subscribe((params: any) => {
      let userId = params['userId'];
      console.log(userId);
    });
  }

}
0
ccwasden