☰

Angular 2でURLからクエリパラメータを取得するにはどうすればいいですか? 質問する

tag-icon • tag-icon typescript angular
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を含むさまざまなオブザーバブルをサブスクライブできます。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);
      });
  }

}

購読解除に関する注意事項

unsubscribe()@Reto と @codef0rmer は、公式ドキュメントによると、このインスタンスではコンポーネント内のメソッドは不要であると正しく指摘しましたonDestroy()。これは私のコードサンプルから削除されました。(これチュートリアル）

おすすめ記事