Angular Routerの達人になる！RouterLinkとRouterLinkActiveを使いこなし、その他の方法もマスター

AngularにおけるRouterLinkとRouterLinkActiveの違い

RouterLink

役割: 現在のURLを指定されたURLに変更します。つまり、ページ遷移を実現します。

属性:

• routerLink: 遷移先のURLを指定します。絶対パス、相対パス、名前付きルートなど、さまざまな形式で指定できます。
• queryParams: 遷移先のURLにクエリパラメータを追加できます。
• fragment: 遷移先のURLにフラグメントを追加できます。

例:

<a routerLink="/home">Home</a>

このコードは、Homeコンポーネントに遷移します。

RouterLinkActive

役割: 現在のURLが指定されたURLと一致しているかどうかによって、スタイルやクラスを付与します。つまり、現在のページを示すナビゲーションバーなどを構築するのに役立ちます。

• routerLinkActive: 一致するURLを指定します。
• exact: 完全一致かどうかを指定します。デフォルトはfalseで、部分一致でもスタイルを付与します。
• routerLinkActiveOptions: 追加オプションを指定できます。

<a routerLink="/home" routerLinkActive="active">Home</a>

このコードは、現在のURLが/homeと一致している場合、activeクラスをaタグに付与します。

まとめ

RouterLinkとRouterLinkActiveは、Angularでページ遷移とナビゲーションバーなどを構築するために使用されるディレクティブです。それぞれの役割と挙動を理解して、適切に使用しましょう。

<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
  <a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>

<router-outlet></router-outlet>

@Component({
  selector: 'my-home',
  templateUrl: './home.component.html'
})
export class HomeComponent { }

@Component({
  selector: 'my-about',
  templateUrl: './about.component.html'
})
export class AboutComponent { }

@Component({
  selector: 'my-contact',
  templateUrl: './contact.component.html'
})
export class ContactComponent { }

このコードでは、以下の機能を実現しています。

• ナビゲーションバーに3つのリンクが表示されます。
• 現在のURLと一致するリンクには、activeクラスが追加されます。
• Home、About、Contactの3つのコンポーネントが用意されています。
• ナビゲーションバーのリンクをクリックすると、対応するコンポーネントが表示されます。

実行方法

1. Angular CLIをインストールします。

npm install -g @angular/cli

1. 新しいプロジェクトを作成します。

ng new my-app

ng serve

1. ブラウザでhttp://localhost:4200を開きます。

RouterLinkとRouterLinkActiveを使用して、AngularでSPAを構築することができます。サンプルコードを参考に、実際に試してみてください。

Angularでページ遷移を行うその他の方法

Router.navigate()メソッドは、プログラムコードから直接ページ遷移を行う方法です。

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

constructor(private router: Router) { }

navigateToHome() {
  this.router.navigate(['/home']);
}

Locationサービスは、ブラウザの履歴と現在のURLを操作するための機能を提供します。

import { Location } from '@angular/common';

constructor(private location: Location) { }

goBack() {
  this.location.back();
}

このコードは、ブラウザの履歴を1つ戻ります。

Windowオブジェクトは、ブラウザのウィンドウを操作するための機能を提供します。

window.location.href = '/home';

アンカータグ

通常のアンカータグを使用して、ページ遷移を行うこともできます。

<a href="/home">Home</a>

• 多くの場合、RouterLinkとRouterLinkActiveを使用するのが最も簡単で効率的な方法です。
• プログラムコードから直接ページ遷移を行う必要がある場合は、Router.navigate()メソッドを使用します。
• ブラウザの履歴を操作する必要がある場合は、Locationサービスを使用します。
• 複雑な遷移を行う必要がある場合は、Windowオブジェクトを使用することもできます。

Angularでページ遷移を行う方法はいくつかあります。それぞれの方法の特徴を理解して、状況に応じて使い分けましょう。