Angular Entegrasyonu: usePathname Hook Belgeleri

usePathname hook'u, yerel ayar segmenti kaldırılmış geçerli tarayıcı yol adını bir Angular Signal<string> olarak döndürür. Bu, yerel ayar ön ekini manuel olarak kaldırmak zorunda kalmadan yerel ayara duyarlı gezinme oluşturmak (örneğin hangi gezinme öğesinin etkin olduğunu belirlemek) için yararlıdır.

Angular'da usePathname İçe Aktarımı

import { usePathname } from "angular-intlayer";

Genel Bakış

usePathname window.location.pathname değerini okur, getPathWithoutLocale aracılığıyla yerel ayar ön ekini kaldırır ve tarayıcı her popstate olayı (geri/ileri gezinme) tetiklediğinde sinyali günceller. Bileşen yok edildiğinde olay dinleyicisini otomatik olarak temizlemek için Angular'ın DestroyRef sınıfını kullanır.

Kullanım

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

Dönüş Değeri

Davranış

• Yerel ayar kaldırma: Öndeki yerel ayar segmentini kaldırır (örn. /tr/dashboard → /dashboard).
• Reaktif: popstate olaylarında (tarayıcı geri / ileri gezinme) otomatik olarak güncellenir.
• SSR güvenli: window mevcut olmadığında "" döndürür.
• Temizlik: Barındıran bileşen yok edildiğinde DestroyRef.onDestroy aracılığıyla popstate dinleyicisi kaldırılır.

Örnek

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: "Kontrol Paneli" },
    { href: "/settings", label: "Ayarlar" },
  ];

  readonly pathname = usePathname();
}

İlgili

• useLocale — mevcut yerel ayar + yerel ayar değiştirici
• getPathWithoutLocale — bu hook tarafından kullanılan temel yardımcı program