Інтеграция Angular: Документація хука usePathname

Хук usePathname повертає поточний шлях браузера з видаленим сегментом локалі як Angular Signal<string>. Це корисно для створення навігації з урахуванням локалі — наприклад, для визначення активного елемента навігації — без необхідності вручну видаляти префікс локалі.

Імпорт usePathname в Angular

import { usePathname } from "angular-intlayer";

Огляд

usePathname зчитує window.location.pathname, видаляє префікс локалі через getPathWithoutLocale та оновлює сигнал щоразу, коли браузер викликає подію popstate (навігація назад/вперед). Він використовує DestroyRef Angular для автоматичного очищення слухача подій під час знищення компонента.

Використання

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();}

Значення, що повертається

Поведінка

• Видалення локалі: Видаляє початковий сегмент локалі (наприклад, /uk/dashboard → /dashboard).
• Реактивність: Автоматично оновлюється під час подій popstate (навігація браузера назад / вперед).
• Безпека для SSR: Повертає "", коли window недоступне.
• Очищення: Слухач popstate видаляється через DestroyRef.onDestroy під час знищення хост-компонента.

Приклад

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();}

Пов'язані ресурси

• useLocale — поточна локаль + перемикач локалі
• getPathWithoutLocale — базова утиліта, яку використовує цей хук