web-dev-qa-db-ja.com

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

Angular 5.0.3を使用しています。たくさんのクエリパラメータを使用してアプリケーションを起動します。 "/ app？param1 = hallo＆param2 = 123"のようになります。 どのようにしてangle2でurlからquery paramsを取得しますか？ _で与えられたすべての助言は私のために働きません。

クエリパラメータを機能させるためのアイデアはありますか。

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

このプライベート関数は私のパラメータを取得するのに役立ちますが、新しいAngular環境では正しい方法ではないと思います。

[update：]私のメインアプリは@Component（{...}）エクスポートクラスAppComponentがOnInitを実装しているように見えます{

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}
angulartypescriptangular-routing
85
Lars

Angular 5では、this.route.queryParamsをサブスクライブすることでクエリパラメータにアクセスします。

例： "/ app？param1 = hallo＆param2 = 123"

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

一方、パス変数は "this.route.snapshot.params"によってアクセスされます。

例： "/ param1 /：param1/param2 /：param2"

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}
140
Vijayendra Mudigal

これは私にとって最もきれいな解決策です

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

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}
55
dapperdan1985

私は、OPがAngular 5の解決策を求めていることを知っていますが、それでも新しい（6+）Angularバージョンについてこの質問につまずくあなたのすべての人のために。 ActivatedRoute.queryParamsに関する Docs の引用（他の答えの大部分はこれに基づいています）：

2つの古いプロパティはまだ利用可能です。それらは それらの置き換えよりも能力が劣り、お勧めできません、そして将来のAngularバージョンでは非推奨になるかもしれません 。

params - ルート固有の必須およびオプションのパラメータを含むObservable。代わりにparamMapを使用してください。

queryParams - すべてのルートで利用可能なクエリパラメータを含むObservable。代わりにqueryParamMapを使用してください。

Docs によると、クエリパラメータを取得する簡単な方法は次のようになります。

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

より高度な方法（高度なコンポーネントの再利用など）については、 this Docsの章を参照してください。

編集：

それが以下のコメントで正しく述べられたように、この答えは間違っています - 少なくともOPによって指定されたケースのために。

OPはグローバルクエリパラメータの取得を要求します（/ app？param1 = hallo＆param2 = 123）。この場合はqueryParamMapを使用する必要があります（@ dapperdan1985の回答と同じ）。

一方、paramMapはルートに固有のパラメータで使用されます（例：/ app /：param1 /：param2、結果として/ app/hallo/123）。

指摘してくれた@JasonRoyleと@dakaに感謝します。

49
grreeenn

HttpParams を使用することもできます。

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }
5
a5tr0
import { ParamMap, Router, ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

_アップデート_ 

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

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}
5
Dmitry Grinko

その仕事は私のために：

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

オプションをもっと見る Angular 2でURLからクエリパラメータを取得する方法

5
izik f

私が似たような解決策を探していたときにこの質問に出くわしましたが、完全なアプリケーションレベルのルーティングやもっとインポートされたモジュールのようなものは必要ありませんでした。

次のコードは私の使用に最適で、追加のモジュールやインポートを必要としません。

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123の出力：

param1 = hello
param2 = 123
2
Reed

あなたが空のrouteオブジェクトを持っているとき、それはあなたがあなたのapp.component.htmlでルータアウトレットを使っていないという事実が主な原因です。

これがないと、空でないサブオブジェクト、特にparams＆queryParamsを含む意味のあるルートオブジェクトを取得することはできません。

<router-outlet><router-outlet>を呼び出す前に<app-main-component></app-main-component>justを追加してみてください

その前に、app-routing>でクエリパラメータを用意しておき、Appコンポーネントで使用されるクラスRouteをエクスポートします。

param: '/param/:dynamicParam', path: MyMainComponent

もちろん最後に、あなたのパラメータを取得するために、私は個人的にthis.route.snapshot.params.dynamicParamを使用します。ここでdynamicParamはあなたのアプリルーティングコンポーネントで使用される名前です:)

1
andrea06590

Angular routerを使っていないのなら、 クエリ文字列 を試してください。それをインストール

npm install --save querystring

あなたのプロジェクトに。あなたのコンポーネントでこのようなことをする

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

substring(1)が必要なのは、この'/mypage?foo=bar'のようなものがある場合、のキー名は?fooになるからです。

0
Chuk Lee

に見つかりました： 親コンポーネントはActivatedRouteから空のParamsを取得します

私のために働きました：

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

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}
0
Yonatan Ayalon

あなたのルートに注意してください。 "redirectTo"はクエリパラメータを削除します。

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

"/ main？param1 = a＆param2 = b"のようなクエリパラメータでメインコンポーネントを呼び出し、リダイレクト転送が有効になる前にメインコンポーネントの "ngOnInit（）"メソッドにクエリパラメータが到着したと仮定します。

しかし、これは間違っています。リダイレクトが先に行われ、クエリパラメータを削除し、クエリパラメータなしでメインコンポーネントのngOnInit（）メソッドを呼び出します。

経路の3行目をに変更しました

{path: "", component: PageOneComponent},

そして今私のクエリパラメータは主要なコンポーネントngOnInitそしてまたPageOneComponentでアクセス可能です。

0
Lars