Angular 2 ルーティング解説

Angular 2のrouter.navigateについて

Angular 2におけるrouter.navigateは、ルーティング機能を使用して、アプリケーション内の異なるコンポーネント間をナビゲートするための重要なメソッドです。これは、ユーザーのクリックや他のイベントに応じて、特定のURLに移動し、対応するコンポーネントを表示する役割を果たします。

基本的な使い方:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnIni   t() {
  }

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

この例では、HomeComponentクラス内でrouter.navigateを使用して、/aboutというパスにナビゲートしています。

パスとクエリパラメータ:

• マトリックスパラメータ
  /:idのようなマトリックスパラメータを使用することもできます。
• クエリパラメータ
  ?id=123のようなクエリパラメータを含めることもできます。
• パス
  /aboutのような単純なパスを指定できます。

ナビゲーションオプション:

• ナビゲーションストラテジー
  NavigationExtrasインターフェースを使用して、ナビゲーションの追加オプションを指定できます。

例:

this.router.navigate(['products', 123], { queryParams: { category: 'electronics' } });

この例では、/products/123というパスにナビゲートし、category=electronicsというクエリパラメータを追加しています。

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnIni   t() {
  }

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

• パス
  ['/about']のように、配列でパスを指定します。
• router.navigateメソッド
  Routerインスタンスのメソッドを使用して、指定されたパスにナビゲートします。
• Routerモジュール
  @angular/routerからインポートします。

this.router.navigate(['products', 123], { queryParams: { category: 'electronics' } });

• クエリパラメータ
  category=electronicsを追加します。
• パス
  /products/123にナビゲートします。

ルーティングモジュール:

• RouterModule.forRoot(routes)を使用して、ルーティングモジュールをアプリケーションに提供します。
• AppRoutingModuleを作成して、ルーティングの構成を行います。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

• componentプロパティ
  対応するコンポーネントを指定します。
• pathプロパティ
  URLのパスを指定します。
• routes配列
  ルーティングのルールを定義します。

RouterLinkディレクティブ:

• RouterLinkディレクティブを使用し、パスやクエリパラメータを指定する。
• テンプレート内で直接リンクを定義する。

<a [routerLink]="['/about']">About</a>

• RouterLinkActiveディレクティブを使用して、現在のURLと一致するリンクを強調表示する。
• アクティブなリンクをスタイル設定する。

<a [routerLink]="['/home']" [routerLinkActive]="['active']">Home</a>

RouterOutletコンポーネント:

• RouterOutletコンポーネントを使用して、現在のURLに一致するコンポーネントを表示する。
• ルーティングの出口点を定義する。

<router-outlet></router-outlet>

プログラムによるナビゲーション:

• ボタンクリックや他のイベントに応じて、特定のパスにナビゲートする。
• JavaScriptコードを使用して、router.navigateメソッドを直接呼び出す。

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

@Component({
  // ...
})
export class MyComponent {
  constructor(private router: Router   ) {}

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

ルーティングガード:

• CanActivate、CanDeactivate、CanLoadなどのガードを使用して、特定の条件下でナビゲーションを許可または拒否する。
• ナビゲーションを制御する。

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

export cla   ss AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | P   romise<boolean> | boolea   n {
    // 認証チェック
    return true; // 認証済みであればtrueを返す
  }
}

• ルーティングの構成を管理する。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeCompone   nt },
  { path: 'about', component: AboutComponent }
];

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