RouterLinkディレクティブは、Angularのナビゲーションに対する宣言的なアプローチです。これにより、Angularのルーティングシステムとシームレスに統合される標準のアンカー要素（<a>）を使用できます。
RouterLinkの使い方
通常のアンカー要素<a>にhref属性を使用する代わりに、Angularルーティングを活用するために、適切なパスを持つRouterLinkディレクティブを追加します。
<nav> <a routerLink="/user-profile">User profile</a> <a routerLink="/settings">Settings</a></nav>
絶対リンクと相対リンクの使用
Angularルーティングにおける相対URLは、現在のルートの場所に対するナビゲーションパスを定義できます。これは、プロトコル（例: http://）とルートドメイン（例: google.com）を含む完全なパスを持つ絶対URLとは対照的です。
<!-- Absolute URL --><a href="https://www.angular.dev/essentials">Angular Essentials Guide</a><!-- Relative URL --><a href="/essentials">Angular Essentials Guide</a>
この例では、最初の例は、基本概念ページに対してプロトコル（つまりhttps://）とルートドメイン（つまりangular.dev）が明示的に定義された完全なパスを含んでいます。対照的に、2番目の例は、ユーザーがすでに/essentialsの正しいルートドメインにいることを前提としています。
一般的に、相対URLは、ルーティング階層内での絶対位置を知る必要がないため、アプリケーション全体で保守しやすいため、推奨されます。
相対URLの仕組み
Angularルーティングには、相対URLを定義するための2つの構文があります。文字列と配列です。
<!-- Navigates user to /dashboard --><a routerLink="dashboard">Dashboard</a><a [routerLink]="['dashboard']">Dashboard</a>
HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な方法です。
相対URLで動的なパラメーターを定義する必要がある場合は、配列構文を使用します。
<a [routerLink]="['user', currentUserId]">Current User</a>
さらに、Angularルーティングでは、相対パスがスラッシュ（/）で始まるかどうかによって、パスを現在のURLに対する相対パスにするか、ルートドメインに対する相対パスにするかを指定できます。
たとえば、ユーザーがexample.com/settingsにいる場合、さまざまなシナリオで異なる相対パスを定義する方法を次に示します。
<!-- Navigates to /settings/notifications --><a routerLink="notifications">Notifications</a><a routerLink="/settings/notifications">Notifications</a><!-- Navigates to /team/:teamId/user/:userId --><a routerLink="/team/123/user/456">User 456</a><a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>”
ルートへのプログラムによるナビゲーション
RouterLinkがテンプレートでの宣言的なナビゲーションを処理する一方で、Angularはロジック、ユーザーアクション、またはアプリケーションの状態に基づいてナビゲートする必要があるシナリオのために、プログラムによるナビゲーションを提供します。Routerを注入することで、ルートへ動的にナビゲートし、パラメーターを渡し、TypeScriptコードでナビゲーションの動作を制御できます。
router.navigate()
router.navigate()メソッドを使用して、URLパス配列を指定することで、ルート間をプログラムでナビゲートできます。
import { Router } from '@angular/router';@Component({ selector: 'app-dashboard', template: ` <button (click)="navigateToProfile()">View Profile</button> `})export class AppDashboard { private router = inject(Router); navigateToProfile() { // Standard navigation this.router.navigate(['/profile']); // With route parameters this.router.navigate(['/users', userId]); // With query parameters this.router.navigate(['/search'], { queryParams: { category: 'books', sort: 'price' } }); }}
router.navigate()は、シンプルおよび複雑なルーティングシナリオの両方をサポートしており、ルートパラメーター、クエリパラメーターを渡し、ナビゲーションの動作を制御できます。
また、relativeToオプションを使用して、ルーティングツリー内のコンポーネントの場所に対する動的なナビゲーションパスを構築できます。
import { Router, ActivatedRoute } from '@angular/router';@Component({ selector: 'app-user-detail', template: ` <button (click)="navigateToEdit()">Edit User</button> <button (click)="navigateToParent()">Back to List</button> `})export class UserDetailComponent { private route = inject(ActivatedRoute); private router = inject(Router); constructor() {} // Navigate to a sibling route navigateToEdit() { // From: /users/123 // To: /users/123/edit this.router.navigate(['edit'], { relativeTo: this.route }); } // Navigate to parent navigateToParent() { // From: /users/123 // To: /users this.router.navigate(['..'], { relativeTo: this.route }); }}
router.navigateByUrl()
router.navigateByUrl()メソッドは、配列セグメントではなくURLパス文字列を使用してプログラムでナビゲートする直接的な方法を提供します。このメソッドは、完全なURLパスがあり、絶対ナビゲーションを実行する必要がある場合に最適です。特に、外部から提供されるURLやディープリンクのシナリオで役立ちます。
// Standard route navigationrouter.navigateByUrl('/products);// Navigate to nested routerouter.navigateByUrl('/products/featured');// Complete URL with parameters and fragmentrouter.navigateByUrl('/products/123?view=details#reviews');// Navigate with query parametersrouter.navigateByUrl('/search?category=books&sortBy=price');
履歴内の現在のURLを置き換える必要がある場合、navigateByUrlはreplaceUrlオプションを持つ設定オブジェクトも受け入れます。
// Replace current URL in historyrouter.navigateByUrl('/checkout', { replaceUrl: true});
次のステップ
レスポンシブでコンテキストを認識するコンポーネントを作成するために、ルートの状態を読み取る方法を学びましょう。