Angular13でURLのQuery Stringを取得する

環境

• node v16.13.1 (npm v8.1.2) (2021/12/01)
• Angular CLI 13.1.2 (2021/12/16)
• Google Chrome 96

0. 準備

0-1. GitHubにリポジトリを作成する

github.com/yvafdevnsk
  Repositories
    New
      Repository name: angular13
      Description: Angular13 sample code.
      Public
      Initialize this repository with:
        [x] Add a README file
        [ ] Add .gitignore
        [ ] Choose a license
          

0-2. GitHubのリポジトリをHTTPSで操作するためのトークンを作成する

github.com/yvafdevnsk
  Settings
    Developer settings
      Personal access tokens
        Note: EGit
        Expiration: 30 days (default)
        Select scopes: [x] repo (Full control of private repositories)
          

0-3. GitHubのリポジトリをクローンする

Eclipse
  Window > Perspective > Open Perspective > Other... > Git
    Clone a Git repository
      Location
        Host: github.com
        Repository path: /yvafdevnsk/angular13
      Connection
        Protocol: https
      Authentication
        User: yvafdevnsk
        Password: (トークン)
        [x] Store in Secure Store

      Destination
        Directory: /home/mizuki/workspace/angular13/github
          

0-X. 参考になるサイト

• Token authentication requirements for Git operations
• Creating a personal access token

1. window.location.searchとURLSearchParamsを使ってQuery Stringを取得する

静的にQuery Stringを取得するのであればこの方法でよい。

1-0. GitHubのプロジェクト

https://github.com/yvafdevnsk/angular13/tree/main/angular13-query-string-location-search

1-1. プロジェクトを作成する

コマンド

cd /home/mizuki/workspace/angular13/github

npx ng new angular13-query-string-location-search
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
        

1-2. Query Stringを取得するコンポーネントを追加する

コマンド

cd /home/mizuki/workspace/angular13/github/angular13-query-string-location-search

npx ng generate component query-string
        

1-3. Query Stringを取得する

src/app/query-string/query-string.component.ts

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

@Component({
  selector: 'app-query-string',
  templateUrl: './query-string.component.html',
  styleUrls: ['./query-string.component.scss']
})
export class QueryStringComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    let searchParams: URLSearchParams = new URLSearchParams(window.location.search);

    console.log("window.location=", window.location); // http://localhost:4200/?key1=abc&key2=123
    console.log("window.location.search=", window.location.search); // ?key1=abc&key2=123
    console.log("searchParams=", searchParams); // 中身は出力されない？

    console.log("searchParams.get(key1)=", searchParams.get("key1")); // abc
    console.log("searchParams.get(key2)=", searchParams.get("key2")); // 123
    console.log("searchParams.get(keynotfound)=", searchParams.get("keynotfound")); // keyがない場合はnull
  }

}
        

1-4. アプリケーションでQuery Stringを取得するコンポーネントを使用する

src/app/app.component.html

<h1>{{title}}</h1>
<app-query-string></app-query-string>
        

1-5. アプリケーションを実行する

コマンド

cd /home/mizuki/workspace/angular13/github/angular13-query-string-location-search

npx ng serve --open
        

URLにQuery Stringを追加してブラウザを再表示する。

http://localhost:4200/?key1=abc&key2=123
          

実行結果

window.location= Location http://localhost:4200/?key1=abc&key2=123
window.location.search= ?key1=abc&key2=123
searchParams= URLSearchParams {  }
searchParams.get(key1)= abc
searchParams.get(key2)= 123
searchParams.get(keynotfound)= null
        

1-X. 参考になるサイト

• Living Standard > URL > query
• Web technology for developers > Web APIs > Location
• Web technology for developers > Web APIs > Location > Location: search
• Web technology for developers > Web APIs > URLSearchParams

2. Angular Routerを使ってQuery Stringを取得する

継続してQuery Stringを取得する必要がある場合はこの方法が使える。

2-0. GitHubのプロジェクト

https://github.com/yvafdevnsk/angular13/tree/main/angular13-query-string-angular-router

2-1. プロジェクトを作成する

コマンド

cd /home/mizuki/workspace/angular13/github

npx ng new angular13-query-string-angular-router
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
        

2-2. Query Stringを取得するコンポーネントを追加する

コマンド

cd /home/mizuki/workspace/angular13/github/angular13-query-string-angular-router

npx ng generate component query-string
        

2-3. Query Stringを取得する

src/app/query-string/query-string.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, ParamMap, Router } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-query-string',
  templateUrl: './query-string.component.html',
  styleUrls: ['./query-string.component.scss']
})
export class QueryStringComponent implements OnInit {

  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {
  }

  ngOnInit(): void {
    // ActivatedRoute.queryParamMap.subscribe()すると、
    // 1回目は空のObject、2回目はQuery Stringが設定されたObjectになる。
    // NavigationEndイベントまで待てば回避できる。

    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(event => {
      let initialParams: ParamMap = this.route.snapshot.queryParamMap;

      console.log("initialParams.get(key1)=", initialParams.get("key1")); // abc
      console.log("initialParams.get(key2)=", initialParams.get("key2")); // 123
      console.log("initialParams.get(keynotfound)=", initialParams.get("keynotfound")); // keyがない場合はnull
    });
  }

}
        

2-4. アプリケーションでQuery Stringを取得するコンポーネントを使用する

src/app/app.component.html

<h1>{{title}}</h1>
<app-query-string></app-query-string>
        

2-5. アプリケーションを実行する

コマンド

cd /home/mizuki/workspace/angular13/github/angular13-query-string-angular-router

npx ng serve --open
        

URLにQuery Stringを追加してブラウザを再表示する。

http://localhost:4200/?key1=abc&key2=123
          

実行結果

initialParams.get(key1)= abc
initialParams.get(key2)= 123
initialParams.get(keynotfound)= null
        

2-X. 参考になるサイト

• How To Use Query Parameters with Angular Router
• Angular2 Query Params Subscription Fires Twice
  • Router observables (as another answer mentions) are BehaviorSubject subjects
  • You can wait until NavigationEnd event is done and then get the values or subscribe to changes:
• ActivatedRoute.params.subscribe called twice [duplicate]

• AngularにおけるstrictPropertyInitializationのベストプラクティス
• AngularのBehaviorSubjectでコンポーネント間の情報を共有する
• Router events - Angular Router Reference
• Angular Routing Events
• Angular/RxJS When should I unsubscribe from `Subscription`