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パラメヌタ

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

スポンサヌリンク