angular getのクエリパラメータを取得する

angularでクエリパラメータを扱う時のメモ

特定の結果を共有したいときとか、もともとgetのパラメータでやりとりしていればURLを共有するだけですが

そうじゃない場合、意図的にURLにパラメータをつけてあげることで共有できるようにする必要があります

レポート画面とかで特定のアカウントの結果を共有したいとかいった場合に使う感じですね

やることは2つ

• 遷移時にURL中のパラメータを取得する
• ページの結果をURLにクエリパラメータに付与する

これでURLによってすぐに目的の結果を参照できます

getのクエリパラメータを取得する

  private queryParams: any;
  private count: number = 0;

  constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) {
  }

  ngOnInit() {
    this._activatedRoute.queryParams.subscribe(
      params => {
        this.queryParams = params;
        this.count = parseInt(this.queryParams.count);
      }
    );
  }

/page?count=20でアクセスすればcountの値を20にセットした状態にすることができます

ただ、subscribeしているので変更があったら毎度呼ばれるような状態になってます

初期化時のみ処理させたい場合は下記のようにすることで初回読み込み時の取得のみ行えます

  ngOnInit() {
    this.queryParams = this._activatedRoute.snapshot.queryParams;
    this.count = parseInt(this.queryParams.count);
  }

クエリパラメータを付与する

• template側でリンクに付与

他のルートから遷移させる場合

<a routerLink="/queryparams" [queryParams]="{count: 10}" routerLinkActive="active">
  QueryParams
</a>

• ts側で処理させる

遷移先を変えずにURLをセットする場合

  this.count = 0;

  onClick(){
    this.count = this.count + 1;
    this._router.navigate(
      [this._activatedRoute.routeConfig.path],
      {queryParams: {count: this.count}}
    );
  }

<div>
  <button (click)="countUp()" class="btn btn-sm btn-primary">
    Count UP
  </button>
</div>

Count: {{count}}

ソースコードはこちら

ngx-sample/src/app/pages/get-params at master · swfz/ngx-sample

サンプル

swfz/ngx-sample: ngx-sample

github.com