ページ遷移時にクエリパラメーターを利用する

Angular2のページ遷移時にクエリパラメーターを設定、取得する方法です。

Routerクラスの「navigate」メソッドを使います。

import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';

@Component({ })
export class Page1Component{ 
  constructor(
    private router: Router
  ) { }    

  pageChange(): void {
    let navigationExtras: NavigationExtras = {
      queryParams: { 'id': 123 }
    };
    this.router.navigate(['/page2'], navigationExtras);
  }
}

上記のpageChange()を実行すると、以下のようにURLが切り替わります。

http://localhost:3000/page2?id=123

「navigateByUrl」にも同様なオプションがあるので同じように出来るものと思っていましたが、試してみたところ動作しませんでした。

ページ遷移元で設定されたクエリパラメーターを取得する方法は以下の通りです。

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

@Component({ })
export class Page2Component implements OnInit{ 
  constructor(
    private route: ActivatedRoute
  ) { }    

  targetId: number;

  ngOnInit(): void {
    this.route.queryParams.subscribe(qParams => {
      this.targetId = qParams['id'];
    });
  }
}

• NavigationExtras - ts - API