ウェブサイト検索

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

私は angular2.0.0-beta.7 を使用しています。コンポーネントが /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")

回答 #1

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 は正しく指摘したように、公式ドキュメントによると、今回のケースではコンポーネントの onDestroy() メソッド内での unsubscribe() は不要です。これを私のコードサンプルから削除しました。（このチュートリアルの青い警告ボックスを参照してください）

回答 #2

URLがこのような場合、http://stackoverflow.com?param1=value

次のコードでパラメータ1を取得できます：

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"];
    }
}

回答 #3

質問ではバージョンbeta 7と指定されていますが、この質問はangular 2 query parametersのような一般的なフレーズでもGoogleで上位検索結果として表示されます。そのため、ここでは最新のルーター（現在はalpha.7）に対する回答を示します。

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

constructor(private router: Router) { }

そしてその後、私たちは ngOnInit メソッドでクエリパラメータを購読することができます（コンストラクタでも問題ありませんが、テスト可能性のためには ngOnInit を使用すべきです）次のように

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

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

まだ注意すべき点がいくつかあります：

  1. params のプロパティに params['id'] のようにアクセスすると、常に 文字列 が返されます。これは、+ を前に付けることで 数値 に変換することができます。
  2. クエリパラメータをオブザーバブルで取得する理由は、新しいコンポーネントを読み込むのではなく、同じコンポーネントインスタンスを再利用できるからです。クエリパラメータが変更されるたびに、私たちが購読している新しいイベントが発生し、それに応じて変更に反応することができます。

回答 #4

私は本当に@StevePaulの答えが好きでしたが、余分なsubscribe/unsubscribeの呼び出しなしで同じことができます。

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
}

回答 #5

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

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'];
});

公式の情報源

回答 #6

こんにちは、URLSearchParams を使うことができます。こちらで詳しく読むことができます。

インポート :

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

そして関数：

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

通知：すべてのプラットフォームでサポートされているわけではなく、Angularのドキュメントによると「実験的」な状態にあるようです

回答 #7

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

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

関連記事