☰

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

tag-icon • tag-icon angular typescript angular-routing
Angular 5でURLからクエリパラメータを取得するにはどうすればいいですか？質問する

私はAngular 5.0.3を使用しています。次のようなクエリパラメータを使用してアプリケーションを起動したいと思います/app?param1=hallo&param2=123。Angular 2 で URL からクエリ パラメータを取得するにはどうすればいいですか?私には効果がありません。

クエリパラメータを機能させる方法について何かアイデアはありますか?

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

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

[更新:] 私のメインアプリは次のようになります

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

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

ベストアンサー1

Angular 5では、クエリパラメータはthis.route.queryParams（以降のAngularバージョンでは）をサブスクライブすることでアクセスされます。推薦する queryParamMap（他の回答も参照してください）。

例：/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;
}

おすすめ記事