usePathname フックは、ロケールセグメントが削除された現在のブラウザのパス名を、Angular の Signal<string> として返します。これは、ロケールのプレフィックスを手動で削除することなく、例えばどのナビゲーション項目がアクティブであるかを判別するなど、ロケールを意識したナビゲーションを構築する際に役立ちます。

Angular での `usePathname` のインポート

typescript

コードをコピー

コードをクリップボードにコピー

import { usePathname } from "angular-intlayer";

import { usePathname } from "angular-intlayer";

概要

usePathname は window.location.pathname を読み取り、getPathWithoutLocale を使用してロケールのプレフィックスを削除し、ブラウザが popstate イベント（戻る/進むナビゲーション）を発生させるたびにシグナルを更新します。コンポーネントが破棄された際に自動的にイベントリスナーをクリーンアップするため、Angular の DestroyRef を使用しています。

使用方法

src/app/nav-item.component.ts

コードをコピー

コードをクリップボードにコピー

import { Component, input } from "@angular/core";import { usePathname } from "angular-intlayer";@Component({  standalone: true,  selector: "app-nav-item",  template: `    <a      [href]="href()"      [attr.aria-current]="pathname() === href() ? 'page' : null"    >      {{ label() }}    </a>  `,})export class NavItemComponent {  readonly href = input.required<string>();  readonly label = input.required<string>();  readonly pathname = usePathname();}

import { Component, input } from "@angular/core";import { usePathname } from "angular-intlayer";@Component({  standalone: true,  selector: "app-nav-item",  template: `    <a      [href]="href()"      [attr.aria-current]="pathname() === href() ? 'page' : null"    >      {{ label() }}    </a>  `,})export class NavItemComponent {  readonly href = input.required<string>();  readonly label = input.required<string>();  readonly pathname = usePathname();}

戻り値

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

タイプ	説明
`Signal<string>`	ロケールプレフィックスを含まない現在のパス名を保持する Angular シグナル。

動作

ロケールの削除: 先頭のロケールセグメントを削除します（例: /ja/dashboard → /dashboard）。
リアクティブ: popstate イベント（ブラウザの戻る / 進む操作）時に自動で更新されます。
SSR セーフ: window が利用できない場合は "" を返します。
クリーンアップ: ホストコンポーネントが破棄されると、DestroyRef.onDestroy を介して popstate リスナーが削除されます。

例

src/app/sidebar.component.ts

コードをコピー

コードをクリップボードにコピー

import { Component } from "@angular/core";import { usePathname } from "angular-intlayer";@Component({  standalone: true,  selector: "app-sidebar",  template: `    <nav>      @for (link of links; track link.href) {        <a          [href]="link.href"          [style.font-weight]="pathname() === link.href ? 'bold' : 'normal'"        >          {{ link.label }}        </a>      }    </nav>  `,})export class SidebarComponent {  readonly links = [    { href: "/dashboard", label: "ダッシュボード" },    { href: "/settings", label: "設定" },  ];  readonly pathname = usePathname();}

import { Component } from "@angular/core";import { usePathname } from "angular-intlayer";@Component({  standalone: true,  selector: "app-sidebar",  template: `    <nav>      @for (link of links; track link.href) {        <a          [href]="link.href"          [style.font-weight]="pathname() === link.href ? 'bold' : 'normal'"        >          {{ link.label }}        </a>      }    </nav>  `,})export class SidebarComponent {  readonly links = [    { href: "/dashboard", label: "ダッシュボード" },    { href: "/settings", label: "設定" },  ];  readonly pathname = usePathname();}

バージョン履歴

Angular 統合: usePathname Hook ドキュメント

Angular での usePathname のインポート

概要

使用方法

戻り値

動作

例

関連情報

Angular 統合: `usePathname` Hook ドキュメント

Angular での `usePathname` のインポート