Router.navigate メソッドでパラメータを受け渡しする方法

この記事ではRouter.navigate メソッドを用いて以下のパラメータを渡す方法を説明しています。

  • ルートパラメータ
  • クエリパラメータ
  • URLフラグメント
  • マトリクスURLパラメータ

プログラム例を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Router.navigate メソッドでパラメータを渡す方法

Router.navigate メソッドはAngularの中で使用されるルート(URL)の変更を行うメソッドです。

Router.navigateメソッドで渡すことができる主なパラメータの種類とその説明を以下に示します。

Router.navigate メソッドで渡すことができるパラメータ

  • ルートパラメータ
    • URLの一部として動的に渡される値です。
    • 例えば、/user/:idというルートがある場合、this.router.navigate(['/user', 123])と記述すると、idパラメータに123を渡すことができます。
  • クエリパラメータ
    • URLの末尾に?で始まる「キー/値」のペアとして渡される値です。
    • 例えば、this.router.navigate(['/main'], { queryParams: { category: 'Angular' } })と記述すると、/main?category=angularというURLを生成することができます。
  • URLフラグメント
    • URLの末尾の#で始まる値です。
    • 例えば、this.router.navigate(['/main'], { fragment: 'Angular' })と記述すると、/main#AngularというURLを生成することができます。
  • マトリクスURLパラメータ
    • URLの特定のセグメントの中に;で始まる「キー/値」のペアとして渡される値です。
    • 例えば、this.router.navigate(['/main', { category: 'Angular' }])と記述すると、/main;category=AngularというURLを生成することができます。

ではこれから各パラメータの渡し方と受け取り方を実際のプログラム例で説明します。

あわせて読みたい

Router.navigateメソッドの基本的な使い方については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

【Angular】Router.navigate メソッドでルーティングする方法
【Angular】Router.navigate メソッドでルーティングする方法

続きを見る

Router.navigate メソッドでルートパラメータを使う場合

Router.navigateメソッドでルートパラメータを使う場合のプログラム例を以下に示しています。

app-routing.module.ts

import { NgModule } from '@angular/core';
// RoutesとRouterModuleをインポート
import { Routes, RouterModule } from '@angular/router';
// 遷移先のコンポーネントをインポート
import { MainComponent } from './main.component';

// ルーティングテーブルでパスとコンポーネントの対応付けをする
const routes: Routes = [
  { path: 'main/:id', component: MainComponent }, // ルートパラメータを使う場合
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

「path: 'main/:id'」の部分の「:id」はルートパラメータを示しています。これを通じて動的な値をURLに組み込むことができます。

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClick()">メインページ</button>

    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private router: Router) {}

  onClick() {
    // ルートパラメータを使う場合
    this.router.navigate(['/main', 1]);
  }
}

ルートパラメータを渡す際には、以下に示すように配列を使用します。

this.router.navigate(['/main', 1]);

これにより、Router.navigateメソッドが実行されると、URLは以下のようになります。なお、「http://localhost:4200」の箇所は環境によって変わります(ローカル開発サーバーを使用しており、ポート4200で実行している場合には以下のURLになります)。

http://localhost:4200/main/1

main.component.ts

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

@Component({
  template: `
    <!-- ルートパラメータを使う場合 -->
    <h1>記事番号 No.{{ id }}</h1>
  `,
})
export class MainComponent {
  //ルートパラメータを使う場合
  id: string | null = null;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.params.subscribe((params) => {
      this.id = params['id'];
    });
  }
}

ルートパラメータを取得する際には、paramsプロパティまたはparamMapプロパティを使用します。上記のプログラムではparamsプロパティを使用して、ルートパラメータを取得しています。

paramMapプロパティを用いる場合には、以下に示すように記述します。paramMapプロパティを購読し、getメソッドを使用してルートパラメータの値を取得します。

ngOnInit() {
  this.route.paramMap.subscribe((paramMap) => {
    this.id = paramMap.get('id');
  });
}

ActivatedRouteクラスのparamMapプロパティを使用する場合、取得したルートパラメータはstringまたはnullの両方の型を持つ可能性があるため、idの型をstring | nullに変更しています。

ActivatedRouteのsnapshotプロパティを使ってルートパラメータを受け取る場合

ActivatedRouteクラスのparamsプロパティやparamsMapプロパティを購読する代わりに、以下に示すようにActivatedRouteクラスのsnapshotプロパティを使っても直接ルートパラメータを取得することができます。

これは、コンポーネントが初期化されるときに一度だけルートパラメータを取得する場合に便利です。これを使用すると、ルートパラメータが変更されても再購読することはありません。ルートパラメータがコンポーネントのライフサイクル中で変更されることがない場合に特に役立ちます。

ngOnInit() {
  // paramsを使用してルートパラメータを取得
  this.id = this.route.snapshot.params['id'];

  // paramsMapを使用してルートパラメータを取得
  this.id = this.route.snapshot.paramMap.get('id');
}

paramsとparamMapの違い

paramsプロパティおよびparamMapプロパティはどちらもActivatedRouteクラスのプロパティです。paramsプロパティおよびparamMapプロパティの違いを以下に示します。

  • paramsプロパティ
    • Observableオブジェクトとしてルートパラメータを提供するActivatedRouteクラスのプロパティです。
    • 購読することで現在のルートパラメータの値を取得することができます。
    • 取得されるルートパラメータは、{ key: string} の形式になります。
  • paramsMapプロパティ
    • Observableオブジェクトとしてルートパラメータを提供するActivatedRouteクラスのプロパティです。
    • 購読することで現在のルートパラメータの値を取得することができます。
    • 取得されるルートパラメータは、ParamMapオブジェクトとして提供されます。ParamMapオブジェクトは、パラメータをより効果的に操作するためのメソッド(例：get, getAll, has など)を提供しています。

Router.navigate メソッドでクエリパラメータを使う場合

Router.navigateメソッドでクエリパラメータを使う場合のプログラム例を以下に示しています。

app-routing.module.ts

import { NgModule } from '@angular/core';
// RoutesとRouterModuleをインポート
import { Routes, RouterModule } from '@angular/router';
// 遷移先のコンポーネントをインポート
import { MainComponent } from './main.component';

// ルーティングテーブルでパスとコンポーネントの対応付けをする
const routes: Routes = [
  { path: 'main', component: MainComponent }, // クエリパラメータを使う場合
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Router.navigateメソッドを使ってクエリパラメータを渡す場合、ルーティング定義においてpath: 'main/:id'のようなルートパラメータを明示的に指定する必要はありません。クエリパラメータを使用する際は、シンプルなpath: 'main'だけで十分です。

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClick()">メインページ</button>

    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private router: Router) {}

  onClick() {
    // クエリパラメータを使う場合
    this.router.navigate(['/main'], {
      queryParams: { category: 'Angular', keyword: 'Routing' },
    });
  }
}

クエリパラメータを渡す際には、以下に示すようにqueryParamsを使用します。

this.router.navigate(['/main'], {
  queryParams: { category: 'Angular', keyword: 'Routing' },
});

これにより、Router.navigateメソッドが実行されると、URLは以下のようになります。なお、「http://localhost:4200」の箇所は環境によって変わります(ローカル開発サーバーを使用しており、ポート4200で実行している場合には以下のURLになります)。

http://localhost:4200/main?category=Angular&keyword=Routing

main.component.ts

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

@Component({
  template: `
    <!--クエリパラメータを使う場合 -->
    <h1>カテゴリー: {{ recieveCategory }}</h1>
    <h1>キーワード: {{ recieveKeyword }}</h1>
  `,
})
export class MainComponent {
  // クエリパラメータを使う場合
  recieveCategory: string | null = null;
  recieveKeyword: string | null = null;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.queryParams.subscribe((params) => {
      this.recieveCategory = params['category'];
      this.recieveKeyword = params['keyword'];
    });
  }
}

クエリパラメータを取得する際には、queryParamsプロパティまたはqueryParamMapプロパティを使用します。上記のプログラムではqueryParamsプロパティを使用して、クエリパラメータを取得しています。

queryParamMapプロパティを用いる場合には、以下に示すように記述します。queryParamMapプロパティを購読し、getメソッドを使用してクエリパラメータの値を取得します。

ngOnInit() {
    this.route.queryParamMap.subscribe((paramsMap) => {
    this.recieveCategory = paramsMap.get('category');
    this.recieveKeyword = paramsMap.get('keyword');
  });
}

ActivatedRouteクラスのqueryParamMapプロパティを使用する場合、取得したパラメータはstringまたはnullの両方の型を持つ可能性があるため、recieveCategoryとrecieveKeywordの型をstring | nullに変更しています。

ActivatedRoute の snapshot プロパティを使ってクエリパラメータを受け取る場合

ActivatedRouteクラスのqueryParamsプロパティやqueryParamsMapプロパティを購読する代わりに、以下に示すようにActivatedRouteクラスの snapshotプロパティを使っても直接クエリパラメータを取得することができます。

これは、コンポーネントが初期化されるときに一度だけクエリパラメータを取得する場合に便利です。これを使用すると、クエリパラメータが変更されても再購読することはありません。クエリパラメータがコンポーネントのライフサイクル中で変更されることがない場合に特に役立ちます。

ngOnInit() {
  // queryParamsを使用してクエリパラメータを取得
  this.recieveCategory = this.route.snapshot.queryParams['category'];
  this.recieveKeyword = this.route.snapshot.queryParams['keyword'];

  // queryParamsMapを使用してクエリパラメータを取得
  this.recieveCategory = this.route.snapshot.queryParamMap.get('category');
  this.recieveKeyword = this.route.snapshot.queryParamMap.get('keyword');
}

queryParamsとqueryParamMapの違い

queryParamsプロパティおよびqueryParamMapプロパティはどちらもActivatedRouteクラスのプロパティです。queryParamsプロパティおよびqueryParamMapプロパティの違いを以下に示します。

  • queryParamsプロパティ
    • Observableオブジェクトとしてクエリパラメータを提供するActivatedRouteクラスのプロパティです。
    • 購読することで現在のクエリパラメータの値を取得することができます。
    • 取得されるクエリパラメータは、{ key: string} の形式になります。
  • queryParamsMapプロパティ
    • Observableオブジェクトとしてクエリパラメータを提供するActivatedRouteクラスのプロパティです。
    • 購読することで現在のクエリパラメータの値を取得することができます。
    • 取得されるクエリパラメータは、ParamMapオブジェクトとして提供されます。ParamMapオブジェクトは、クエリパラメータをより効果的に操作するためのメソッド(例：get, getAll, has など)を提供します。

Router.navigate メソッドでURLフラグメントを使う場合

Router.navigateメソッドでURLフラグメント(アンカー、フラグメント識別子)を使う場合のプログラム例を以下に示しています。

app-routing.module.ts

import { NgModule } from '@angular/core';
// RoutesとRouterModuleをインポート
import { Routes, RouterModule } from '@angular/router';
// 遷移先のコンポーネントをインポート
import { MainComponent } from './main.component';

// ルーティングテーブルでパスとコンポーネントの対応付けをする
const routes: Routes = [
  { path: 'main', component: MainComponent }, // URLフラグメントを使う場合
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Router.navigateメソッドを使ってURLフラグメントを渡す場合、ルーティング定義においてpath: 'main/:id'のようなルートパラメータを明示的に指定する必要はありません。URLフラグメントを使用する際は、シンプルなpath: 'main'だけで十分です。

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClick()">メインページ</button>

    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private router: Router) {}

  onClick() {
    // URLフラグメントを使う場合
    this.router.navigate(['/main'], { fragment: 'Angular' });
  }
}

URLフラグメントを渡す際には、以下に示すようにfragmentを使用します。

this.router.navigate(['/main'], { fragment: 'Angular' });

これにより、Router.navigateメソッドが実行されると、URLは以下のようになります。なお、「http://localhost:4200」の箇所は環境によって変わります(ローカル開発サーバーを使用しており、ポート4200で実行している場合には以下のURLになります)。

http://localhost:4200/main#Angular

main.component.ts

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

@Component({
  template: `
    <!--URLフラグメントを使う場合 -->
    <h1>フラグメント: {{ recieveFragment }}</h1>
  `,
})
export class MainComponent {
  // URLフラグメントを使う場合
  recieveFragment: string | null = null;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.fragment.subscribe((frag) => {
      this.recieveFragment = frag;
    });
  }
}

URLフラグメントを取得する際には、fragmentプロパティを使用します。

ActivatedRouteクラスのfragmentプロパティを使用する場合、取得したパラメータは stringまたはnullの両方の型を持つ可能性があるため、recieveFragmentの型をstring | nullに変更しています。

ActivatedRoute のsnapshotプロパティを使ってURLフラグメントを受け取る場合

ActivatedRouteクラスのfragmentプロパティを購読する代わりに、以下に示すようにActivatedRouteのsnapshotプロパティを使っても直接URLフラグメントを取得することができます。

これは、コンポーネントが初期化されるときに一度だけURLフラグメントを取得する場合に便利です。これを使用すると、URLフラグメントが変更されても再購読することはありません。URLフラグメントがコンポーネントのライフサイクル中で変更されることがない場合に特に役立ちます。

ngOnInit() {
  this.recieveFragment = this.route.snapshot.fragment;
}

Router.navigate メソッドでマトリクスURLパラメータを使う場合

Router.navigateメソッドでマトリクスURLパラメータを使う場合のプログラム例を以下に示しています。

app-routing.module.ts

import { NgModule } from '@angular/core';
// RoutesとRouterModuleをインポート
import { Routes, RouterModule } from '@angular/router';
// 遷移先のコンポーネントをインポート
import { MainComponent } from './main.component';

// ルーティングテーブルでパスとコンポーネントの対応付けをする
const routes: Routes = [
  { path: 'main', component: MainComponent }, // マトリクスURLを使う場合
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Router.navigateメソッドを使ってマトリクスURLパラメータを渡す場合、ルーティング定義においてpath: 'main/:id'のようなルートパラメータを明示的に指定する必要はありません。マトリクスURLパラメータを使用する際は、シンプルなpath: 'main'だけで十分です。

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClick()">メインページ</button>

    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private router: Router) {}

  onClick() {
    // マトリクスURLを使う場合
    this.router.navigate([
      '/main',
      { category: 'Angular', keyword: 'Routing' },
    ]);
  }
}

マトリクスURLパラメータを渡す際には、以下に示すように配列を使用します。

this.router.navigate([
  '/main',
  { category: 'Angular', keyword: 'Routing' },
]);

これにより、Router.navigateメソッドが実行されると、URLは以下のようになります。なお、「http://localhost:4200」の箇所は環境によって変わります(ローカル開発サーバーを使用しており、ポート4200で実行している場合には以下のURLになります)。

http://localhost:4200/main;category=Angular;keyword=Routing

main.component.ts

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

@Component({
  template: `
    <!--マトリクスURLを使う場合 -->
    <h1>カテゴリー: {{ recieveCategory }}</h1>
    <h1>キーワード: {{ recieveKeyword }}</h1>
  `,
})
export class MainComponent {
  // マトリクスURLを使う場合
  recieveCategory: string | null = null;
  recieveKeyword: string | null = null;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.params.subscribe((params) => {
      this.recieveCategory = params['category'];
      this.recieveKeyword = params['keyword'];
    });
  }
}

マトリクスURLパラメータを取得する際には、paramsプロパティまたはparamMapプロパティを使用します。上記のプログラムではparamsプロパティを使用して、マトリクスURLパラメータを取得しています。

paramMapプロパティを用いる場合には、以下に示すように記述します。paramMapプロパティを購読し、getメソッドを使用してマトリクスURLパラメータの値を取得します。

ngOnInit() {
  this.route.paramMap.subscribe((paramMap) => {
    this.recieveCategory = paramMap.get('category');
    this.recieveKeyword = paramMap.get('keyword');
  });
}

ActivatedRouteクラスの paramsプロパティまたはparamMapプロパティを使用する場合、取得したパラメータはstringまたはnull 両方の型を持つ可能性があるため、recieveCategoryとrecieveKeywordの型をstring | nullに変更しています。

ActivatedRouteのsnapshotプロパティを使ってマトリクスURLのパラメータを受け取る場合

ActivatedRouteクラスのparamsプロパティやparamsMapプロパティを購読する代わりに、以下に示すようにActivatedRouteクラスのsnapshotプロパティを使っても直接マトリクスURLのパラメータを取得することができます。

これは、コンポーネントが初期化されるときに一度だけマトリクスURLのパラメータを取得する場合に便利です。これを使用すると、マトリクスURLのパラメータが変更されても再購読することはありません。マトリクスURLのパラメータがコンポーネントのライフサイクル中で変更されることがない場合に特に役立ちます。

ngOnInit() {
 // paramsを使用してマトリクスURLパラメータを取得
  this.recieveCategory = this.route.snapshot.params['category'];
  this.recieveKeyword = this.route.snapshot.params['keyword'];

  // paramsMapを使用してマトリクスURLパラメータを取得
  this.recieveCategory = this.route.snapshot.paramMap.get('category');
  this.recieveKeyword = this.route.snapshot.paramMap.get('keyword');
}

本記事のまとめ

この記事ではRouter.navigate メソッドを用いて以下のパラメータを渡す方法を説明しました。

  • ルートパラメータ
  • クエリパラメータ
  • URLフラグメント
  • マトリクスURLパラメータ

お読み頂きありがとうございました。