1. ホーム
  2. タイプスクリプト

[解決済み] Angular 2でurlからクエリパラメータを取得する方法は?

2022-04-15 18:42:05

質問

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")

解決方法は?

のインスタンスを注入することで ActivatedRoute を含む様々なobservableにサブスクライブすることができます。 queryParamsparams 観測可能である。

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 の指摘はもっともなもので、公式ドキュメントにあるように unsubscribe() コンポーネント内の onDestroy() メソッドはこの例では不要です。これは私のコードサンプルから削除されました。(青い警告ボックスの これ チュートリアル)