Routerイベントとナビゲーション
ナビゲーションのライフサイクルイベントに応答します
「Routerイベントとナビゲーション」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
routerイベントのストリーム
Router.eventsは、ナビゲーションのライフサイクル（開始、認識、guardの確認、resolve、終了）の間にイベントを発行するobservableです。購読すると、アプリ全体でナビゲーションに反応できます。
主なイベントの種類
よく使うイベントには、NavigationStart、NavigationEnd、NavigationCancel、NavigationErrorがあります。それぞれクラスのインスタンスなので、フィルタリングできます。
NavigationEndを監視する
filterとinstanceofによるチェックを使うと、ストリームを特定のイベント型に絞り込めます。
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';
const router = inject(Router);
router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));グローバルなローディングインジケーター
NavigationStartからNavigationEnd、NavigationCancel、またはNavigationErrorまでの間、スピナーを表示します。
router.events.subscribe(e => {
if (e instanceof NavigationStart) this.loading = true;
if (e instanceof NavigationEnd ||
e instanceof NavigationCancel ||
e instanceof NavigationError) this.loading = false;
});ナビゲーション時にトップへスクロールする
ナビゲーションが成功するたびに、スクロール位置をリセットします。（組み込みのscrollPositionRestorationも利用できます。）
router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));Analyticsのページトラッキング
NavigationEndは、Analyticsにページビューを記録するのに最適なフックです。
router.events.pipe(
filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));プログラムによるナビゲーション
router.navigateはcommands配列を受け取り、router.navigateByUrlは完全なURL文字列を受け取ります。どちらも、ナビゲーションが成功したかどうかを解決するpromiseを返します。
router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');
const ok = await router.navigate(['/home']);
console.log('success?', ok);相対ナビゲーション
relativeToを使うと、現在のルートを基準にナビゲーションできます。たとえば、子コンポーネントから移動する場合に使います。
const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });routerLinkとアクティブ状態
テンプレートでは、routerLinkが宣言的にナビゲーションを処理し、routerLinkActiveがアクティブなリンクにCSSクラスを追加します。
<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
routerLinkActive="active">Profile</a>NavigationErrorの処理
NavigationErrorを購読すると、失敗したナビゲーション（resolverの失敗やlazy-loadの失敗など）を処理し、わかりやすいメッセージを表示できます。
router.events.pipe(
filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));型付きイベントのフィルタリング
AngularにはRouterEventの型も用意されています。filter内のtype guard述語を使うと、キャストなしでsubscriber内のイベントを正しい型として扱えます。
クイックチェック
routerイベントについての理解度を確認しましょう。
まとめ：Routerイベントとナビゲーション
Router.eventsはナビゲーションのライフサイクルを公開します。
NavigationStart、NavigationEnd、NavigationCancel、NavigationErrorをフィルタリングします。- ローディングスピナー、スクロールのリセット、Analyticsを制御します。
navigate、navigateByUrl、またはrouterLinkで移動します。
Angular Router Advancedを修了しました。
よくある質問
「Routerイベントとナビゲーション」レッスンは無料ですか？
はい。「Routerイベントとナビゲーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「Routerイベントとナビゲーション」で何を学びますか？
ナビゲーションのライフサイクルイベントに応答します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Routerイベントとナビゲーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ルートパラメーターとクエリパラメーター
- Resolverとルートデータ
- 関数型ルートガード
- Routerイベントとナビゲーション