Angular URLパラメータ渡し解説

AngularにおけるURL内のパラメータをrouterLinkに渡す方法の日本語解説

Angularにおいて、URL内の特定の箇所にパラメータを渡すには、routerLinkディレクティブを使用します。このディレクティブは、ルーティングモジュールによって提供され、コンポーネント間をナビゲートするために使用されます。

基本的な構文

<a [routerLink]="['/path', parameter1, parameter2]">Navigate</a>

• parameter1, parameter2: これらは、パス内に埋め込まれるパラメータです。
• /path: これは、ナビゲートするルートのパスです。

例

<a [routerLink]="['/products', productId]">View Product</a>

この例では、productIdという変数に格納された値が、/productsルートのパスに埋め込まれます。つまり、productIdが10の場合、リンクは/products/10になります。

パラメータの取得

ルーティングモジュールで定義されたルートガードを使用して、パラメータを取得することができます。

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
       const productId = params['productId'];
    // パラメータを使用して処理を実行
  });
}

複数のパラメータ

複数のパラメータを使用する場合は、以下のように指定します。

<a [routerLink]="['/products', productId, category]">View Product</a>

この場合、productIdとcategoryの両方がパスに埋め込まれます。

クエリパラメータ

<a [routerLink]="['/products', { id: productId, category: 'electronics' }]">View Product</a>

この場合、idとcategoryがクエリパラメータとして追加されます。

<a [routerLink]="['/path', parameter1, parameter2]">Navigate</a>

<a [routerLink]="['/products', productId]">View Product</a>

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
       const productId = params['productId'];
    // パラメータを使用して処理を実行
  });
}

<a [routerLink]="['/products', productId, category]">View Product</a>

<a [routerLink]="['/products', { id: productId, category: 'electronics' }]">View Product</a>

RouterStateSnapshotを使用する

RouterStateSnapshotは、ルーターの状態に関する情報を提供します。これを利用して、現在のURLからパラメータを抽出することができます。

import { ActivatedRoute, RouterStateSnapshot } from '@angular/router';

constructor(private router: Router) {}

navigateToProduct(productId: number) {
  const url = this.router.createUrlTree(['/products', productId]);
  this.router.navigateByUrl(url);
}

RouterLinkActiveを使用する

RouterLinkActiveディレクティブは、現在のURLと一致するリンクをアクティブにするために使用されます。これを利用して、パラメータを含むURLを生成し、アクティブなリンクを更新することができます。

<a [routerLink]="['/products', productId]" routerLinkActive="active">View Product</a>

URLエンコード

パラメータに特殊文字が含まれる場合は、URLエンコードを行う必要があります。これにより、パラメータが正しく解釈されます。

import { encodeURIComponent } from '@angular/router';

const encodedProductId = encodeURIComponent(productId);
<a [routerLink]="['/products', encodedProductId]">View Product</a>

カスタムパイプ

複雑なパラメータ処理が必要な場合は、カスタムパイプを作成することができます。パイプは、テンプレート内でデータを変換するために使用されます。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'productUrl'
})
export class ProductUrlPipe implements PipeTransform {
  transform   (productId: number): string {
    // パラメータの処理
    return `/products/${productId}`;
  }
}

<a [routerLink]="productId | productUrl">View Product</a>