Angular Router Linkleme [Statik]

Angular Router konusuna https://gelistir.net/492/angular-router-giris/ adresindeki başlıkta giriş yapmıştık. Bu başlıkta ise, uygulama içinden, route’ lara link vermeyi inceleyeceğiz.

• Anasayfa için yeni bir HomeComponent oluşturuyorum ve ardından AppModule içerisindeki route tanımlarımı düzenliyorum;

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'about', component: AboutComponent}
];

• Basit bir navigation bar oluşturuyoruz. Linklemeleri bu bar üzerinde yapıcaz. İlgili bar’ ın HTML kodunu Bootstrap framework’ den alıyorum ve Ana Template’ imiz olan AppComponent Template’ in en üst kısmına ekliyorum;

<ul class="nav nav-tabs">
  <li class="active"><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

routerLink ile link oluşturmak

• Eğer ki linklemeyi "href" attribute üzerinden yaparsanız route larınız çalışacak ve her tıklamanızda doğru sonucu alacaksınız. LAKİN, her seferinde uygulamanız baştan yüklenmiş olacak 🙂
  Bunu asla istemiyoruz. O yüzden linklemeleri, RouterModule’ ün bize sunduğu routerLink directive’ i ile yapıyoruz;

<ul class="nav nav-tabs">
        <li class="active"><a routerLink="/">Home</a></li>
        <li><a routerLink="/about">About</a></li></ul>

Aktif Linklere CSS Eklemek

• Uygulamalarımızda en çok kullandığımız özelliklerden biri de, url bazlı olarak seçili navigation link’ in css özelliğini değiştirmektir. Seçili olan linkin css özelliğine yeni bir css ekleriz. Örneğin "active" css‘ i gibi. Angular’ da bu kullanım şeklimizi biliyor ki, bunun için de directive’ ler eklemiş. "routeLinkActive" directive’ ine vereceğiniz css class’ ı, ilgili link aktif ise, otomatik olarak element’ e eklenecektir;

<li routerLinkActive="active"><a routerLink="/">Home</a></li>

<li routerLinkActive="active"><a routerLink="/about">About</a></li>

• Lakin ufak bir problem var, "/" url parçası, tüm path’ lerin içerisinde halihazırda bulunuyor. Bu sebeple, hem aktif olan path’ in elementine hem de "/" path’ inin element’ine class eklemesi yapılır. Bu sorunu çözmek için,ilgili element’ in "routerLinkActiveOptions" property’ si içerisine bir obje eklememiz gerekiyor;

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact:true }"><a routerLink="/">Home</a></li>

• routerLinkActiveOptions property’ si içerisindeki obje’ de exact:true değerini verirsek, url sadece ilgili path’ i kapsıyor ise, routerLinkActive diretive’ i çalışır. Aktif olan link "/" path’ ini içermesi YETMEZ.

CANLI ÖRNEK;