Angular’da Dinamik Rotalarda routerLinkActive Kullanımı

Basit ama birçoğumuzun takıldığı bir konu. Bir profil sayfasında “Duvar”, “Kitapları”, “Takipçileri” gibi sekmeler düşünün. Hepsi aynı kullanıcıya ait ve ortak bir öneki paylaşıyor:

/okur/umutyerebakmaz            → Duvar
/okur/umutyerebakmaz/kitaplari  → Kitapları

#Sorun: iki sekme birden aktif

routerLinkActive varsayılan olarak öneke göre eşleşir. /okur/umutyerebakmaz/kitaplari adresi /okur/umutyerebakmaz ile başladığı için “Kitapları” sekmesindeyken “Duvar” da aktif sınıfını alır ve tasarımda iki sekme birden seçili görünür.

#Çözüm: üst rotada tam eşleşme

Bu yalnızca diğerlerinin öneki olan rotada yaşanır; exact seçeneğini de yalnızca ona eklemek yeterli:

<nav class="user-nav">
  <a [routerLink]="['/okur', user.slug]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Duvar</a>
  <a [routerLink]="['/okur', user.slug, 'kitaplari']" routerLinkActive="active">Kitapları</a>
  <a [routerLink]="['/okur', user.slug, 'takipcileri']" routerLinkActive="active">Takipçileri</a>
</nav>

Alt sekmelere exact eklemek gerekmez; hatta çoğu zaman istenmez. Örneğin /okur/umutyerebakmaz/kitaplari/42 gibi bir kitap detayına girildiğinde “Kitapları” sekmesinin aktif kalması doğru davranıştır.

#Daha ince ayar

Angular 12’den beri exact yerine hangi parçaların karşılaştırılacağını tek tek belirleyebilirsiniz. Örneğin yolu tam eşleştirip sorgu parametrelerini yok saymak için:

readonly exactPath: IsActiveMatchOptions = {
  paths: 'exact',
  queryParams: 'ignored',
  matrixParams: 'ignored',
  fragment: 'ignored',
};

<a [routerLink]="['/okur', user.slug]" routerLinkActive="active" [routerLinkActiveOptions]="exactPath">Duvar</a>

Böylece /okur/umutyerebakmaz?sayfa=2 adresinde de “Duvar” aktif kalır; { exact: true } ise sorgu parametreleri farklı olduğunda eşleşmezdi.

Ayrıntılar için Angular RouterLinkActive belgeleri.

#Güncelleme notu

Bu yazının ilk hali 2020’de Angular 9 için İngilizce olarak Medium’da yayımlandı. O sürümde exact seçeneğinin bütün linklere eklenmesi öneriliyordu; aslında yalnızca öneki paylaşılan üst rotada gerekli. Yazıyı Türkçeye çevirip örneği güncelledim ve IsActiveMatchOptions bölümünü ekledim.