Angular 18シリーズ(21)ルータールーティング変更イベント

クズども · 掲載地 2024/08/05 14:11:09

要件:Angular Routeのルート変更を検出し、ナビゲーションバーのメニューを切り替え、ルートの読み込み時にTitleを注入してウェブページのタイトルを動的に変更すること。

そのために、シンプルなAppコンポーネントを作成し、そのルーターをコンストラクタに注入します:

ログインが見えます。

このようなRouterEventsは、以下のルーター関連イベントのベースクラス(アルファベット順)として機能します。

ガードチェックエンド
ガードチェックスタート
ナビゲーションキャンセル
ナビゲーション終了
ナビゲーションエラー
ナビゲーションスキップ
ナビゲーションスタート
リゾルブエンド
リゾルブスタート
ルート認定

参考：ハイパーリンクのログインが見えます。

上記のカテゴリのリストは、ルーターが発信する可能性のある結果です。例えば、ユーザーが新しいビューに移動し始めると、NavigationStartとNavigationEndのイベントが呼び出されます。

この情報(およびその他)を入手するには、以下のコードでrouter.eventsイベントにサブスクライブできます:

ログインが見えます。

イベントを条件でフィルタリングすると、コードは次の通りです。

ログインが見えます。

例えばNavigationEndのように1つのイベントだけを使いたい場合は、filter()でRxJSから観測値を持ち込み転送し、特定のイベントでのみ出力するようにできます:

ログインが見えます。

ページタイトルコードを修正する:

ログインが見えます。

ルート切り替えメニューをクリックすると、レンダリングは以下の通りです:

(終わり)

[角] Angular 18シリーズ(21)ルータールーティング変更イベント

関連記事

閲覧したセクション