【Angular】Router.navigateByUrlとRouter.navigateを使いこなす：コンポーネント間遷移をマスターするための詳細ガイド

AngularにおけるRouter.navigateByUrlとRouter.navigateの使い方

Router.navigateByUrlの使い方

router.navigateByUrlメソッドは、文字列で指定されたURLパスへ直接ナビゲートします。構文は以下の通りです。

router.navigateByUrl('/target/path');

この場合、'/target/path'で指定されたURLへアプリケーションが遷移します。

例：特定のコンポーネントへ遷移

router.navigateByUrl('/products/123'); // '/products/123' にあるコンポーネントへ遷移

一方、router.navigateメソッドは、アプリケーション内の定義済みルートを基にナビゲートを行います。構文は以下の通りです。

router.navigate(['./relative/path'], { queryParams: { param1: 'value1', param2: 'value2' } });

この場合、現在のルートに対して相対的なパスである'./relative/path'へナビゲートし、queryParamsオブジェクトでクエリパラメータを設定できます。

例：相対パスを用いたナビゲーションとクエリパラメータの設定

router.navigate(['../related-component'], { queryParams: { id: 456 } }); 
// 現在のルートから1階層上の `../related-component` へ遷移し、`id` クエリパラメータに `456` を設定

RouterLinkディレクティブ

上記で紹介した2つのメソッドに加え、テンプレート内でルーターリンクを定義するためのrouterLinkディレクティブも用意されています。

<a routerLink="/products">商品一覧へ</a>

上記の例では、"/products"パスへ遷移するリンクが生成されます。

• router.navigateByUrl: 文字列URLパスで直接ナビゲート
• router.navigate: アプリケーション内ルートを基にナビゲート、クエリパラメータ設定可
• routerLinkディレクティブ: テンプレート内でルーターリンクを定義

コンポーネント間ナビゲーション

AppComponent.html

<div>
  <h1>商品一覧</h1>
  <ul>
    <li *ngFor="let product of products">
      <a routerLink="/products/{{product.id}}">{{product.name}}</a>
    </li>
  </ul>
</div>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  products = [
    { id: 1, name: '商品A' },
    { id: 2, name: '商品B' },
    { id: 3, name: '商品C' }
  ];

  constructor(private router: Router) {}

  onProductClick(productId: number) {
    this.router.navigateByUrl(`/products/${productId}`); // 特定の製品詳細コンポーネントへ遷移
  }
}

product-detail.component.html

<div>
  <h2>商品詳細</h2>
  <p>名前: {{ product.name }}</p>
  <p>価格: {{ product.price }}</p>
</div>

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  product: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    const productId = parseInt(this.route.snapshot.paramMap.get('id')!);
    // ActivatedRouteを用いて、URLパラメータから商品IDを取得
    this.product = this.getProductById(productId);
  }

  getProductById(productId: number): any {
    // 実際には、API連携などを通して製品情報取得処理を実装
    return { id: productId, name: '製品詳細', price: 1000 };
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { ProductDetailComponent } from './product-detail.component';

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'products/:id', component: ProductDetailComponent }
];

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

この例では、AppComponentのテンプレートでrouterLinkディレクティブを用いて商品一覧を表示し、各商品名のリンクをクリックするとProductDetailComponentへ遷移するようにしています。

ProductDetailComponent側では、ActivatedRouteを用いてURLパラメータから商品IDを取得し、それに基づいた情報表示を行う処理を実装しています。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {}

  goToRelatedComponent() {
    this.router.navigate(['../related-component'], { queryParams: { category: 'electronics' } });
    // 現在のルートから1階層上の `../related-component` へ遷移し、`category` クエリパラメータに `electronics` を設定
  }
}

RouterModule.forRoot()を用いたデフォルトルート設定

アプリケーション起動時にデフォルトで表示するコンポーネントを指定できます。

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

const routes: Routes = [
  { path: '', component: DefaultComponent }, // デフォルトコンポーネントを指定
  // その他のルート設定
];

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

RouterLink Directivesを用いたテンプレート内でのナビゲーション

テンプレート内に直接リンクを記述することで、コンポーネント間遷移を定義できます。

<a routerLink="/products">商品一覧へ</a>

ActivatedRouteを用いたパラメータ取得

URLパラメータを取得するには、ActivatedRouteインジェクションを用います。

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.productId = parseInt(this.route.snapshot.paramMap.get('id')!);
    // URLパラメータから商品IDを取得
  }
}

Auxiliary Routesを用いた複数コンポーネントの同時表示

サイドバーやフッターなど、メインコンテンツと同時に表示したいコンポーネントを定義できます。

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [ // 子ルート定義
      { path: 'products', component: ProductListComponent },
      { path: 'products/:id', component: ProductDetailComponent }
    ]
  },
  { path: 'sidebar', component: SidebarComponent, outlet: 'sidebar' } // 'sidebar' という名前のアウトレットにコンポーネントを配置
];

Router Eventsを用いたナビゲーションイベントの処理

ナビゲーション開始、終了、エラー発生などのイベントを購読し、アプリケーションロジックを実行できます。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loading = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationStart) {
        this.loading = true; // ナビゲーション開始時にローディング表示
      } else if (event instanceof NavigationEnd || event instanceof NavigationError) {
        this.loading = false; // ナビゲーション終了またはエラー発生時にローディング非表示
      }
    });
  }
}

上記以外にも、ng-component-outletディレクティブや@angular/cdk/overlayパッケージを用いたダイアログ表示など、様々な方法でコンポーネント間遷移を実現できます。