Angular 2 でのオプションルートパラメータ

ルート設定

まず、@RouteConfig デコレータを使ってルート設定を行います。このとき、オプションパラメータはコロン(:)とパラメータ名で記述します。

@RouteConfig([
  { path: '/user/:id', component: User, name: 'User' },
  { path: '/user', component: User, name: 'UserNew' }
])
export class AppCmp {
  // ...
}

この例では、'/user/:id' というルートと '/user' というルートを設定しています。

• '/user/:id' ルートは、id という名前のパラメータを受け取ります。
• '/user' ルートは、パラメータを受け取りません。

コンポーネントでのパラメータ取得

次に、コンポーネント側でルートパラメータを取得する必要があります。

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

export class UserCmp {
  constructor(private params: RouteParams) {
    // パラメータ 'id' を取得
    const id = params.get('id');

    // パラメータが存在する場合
    if (id) {
      // ...
    }
  }
}

RouteParams サービスをインジェクションし、get() メソッドを使ってパラメータを取得します。

• get() メソッドは、パラメータ名とその型を引数として受け取ります。
• パラメータが存在しない場合は、null が返されます。

オプションパラメータの扱い

オプションパラメータは、存在しない可能性があるため、nullチェックを行う必要があります。

export class UserCmp {
  constructor(private params: RouteParams) {
    // パラメータ 'id' を取得
    const id = params.get('id');

    // パラメータが存在する場合
    if (id) {
      // パラメータ 'id' を使用
      console.log(`User ID: ${id}`);
    } else {
      // パラメータが存在しない処理
      console.log('User ID not specified');
    }
  }
}

上記の例では、パラメータ id が存在しない場合は "User ID not specified" というメッセージを出力しています。

デフォルト値の設定

オプションパラメータにデフォルト値を設定することもできます。

export class UserCmp {
  constructor(private params: RouteParams) {
    // パラメータ 'id' を取得
    const id = params.get('id') || 1;

    // パラメータ 'id' を使用
    console.log(`User ID: ${id}`);
  }
}

上記の例では、パラメータ id が存在しない場合は、デフォルト値 1 が使用されます。

• オプションパラメータは、複数のルートで同じ名前で使用することができます。
• オプションパラメータは、クエリパラメータと同様に、URL に直接入力することができます。

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router';

@RouteConfig([
  { path: '/user/:id', component: UserCmp, name: 'User' },
  { path: '/user', component: UserCmp, name: 'UserNew' }
])
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
  // ...
}

import { Component, Input } from '@angular/core';
import { RouteParams } from '@angular/router';

@Component({
  selector: 'user-cmp',
  templateUrl: './user.component.html'
})
export class UserCmp {
  @Input() id: number;

  constructor(private params: RouteParams) {
    // パラメータ 'id' を取得
    this.id = params.get('id') || 1;
  }
}

<h1>My App</h1>
<a [routerLink]="['/user']">New User</a>
<a [routerLink]="['/user', 123]">User 123</a>

<router-outlet></router-outlet>

<h2>User</h2>

<p>User ID: {{id}}</p>

• /user にアクセスすると、UserCmp コンポーネントが表示されます。
• /user/123 にアクセスすると、UserCmp コンポーネントが表示され、id は 123 に設定されます。

オプションルートパラメータは、さまざまな状況で役立ちます。

• ユーザーが特定のリソースを直接アクセスできるようにする場合
• ユーザーが検索結果に基づいてリソースを閲覧できるようにする場合
• ユーザーが異なるバージョンのリソースにアクセスできるようにする場合

@Optional デコレータ

@Optional デコレータを使って、パラメータがオプションであることを明示的に指定することができます。

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

export class UserCmp {
  constructor(private params: RouteParams) {
    // パラメータ 'id' を取得
    const id = params.get('id');

    // パラメータが存在する場合
    if (id) {
      // ...
    }
  }
}

上記の例では、id パラメータに @Optional デコレータを追加しています。

デフォルト値を省略することもできます。

export class UserCmp {
  constructor(private params: RouteParams) {
    // パラメータ 'id' を取得
    const id = params.get('id');

    // パラメータが存在する場合
    if (id) {
      // ...
    } else {
      // パラメータが存在しない処理
      console.log('User ID not specified');
    }
  }
}

上記の例では、id パラメータのデフォルト値を省略しています。

null チェックの省略

null チェックを省略することもできます。

export class UserCmp {
  constructor(private params: RouteParams) {
    // パラメータ 'id' を取得
    const id = params.get('id');

    // パラメータ 'id' を使用
    console.log(`User ID: ${id}`);
  }
}

上記の例では、id パラメータが null の場合、エラーが発生します。

オプションルートパラメータを設定するには、さまざまな方法があります。

どの方法を使用するかは、状況によって異なります。

• パラメータがオプションであることを明示的に指定したい場合は、@Optional デコレータを使用します。
• デフォルト値を省略したい場合は、デフォルト値を指定しません。
• null チェックを省略したい場合は、null チェックを行いません。