Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Angular 4 İle Routing Navigation

Merhaba,

Önceki yazılarımdan Angular 4 Routing Mekanizması başlıklı makalemde Angular ile routing işlemlerinin nasıl gerçekleştirildiğini ele almıştık. Bu içeriğimizde ise Angular’da Routing Navigation ile bir componentten bir başka componente yönlendirilme işlemini inceleyeceğiz.

Diyelim ki; “AComponent”, “BComponent”, “CComponent” ve “ErrorComponent” olmak üzere dört adet componentimiz olsun ve route yapılanmasıda aşağıdaki gibi olsun.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Router, RouterModule, Routes } from "@angular/router";

import { AppComponent } from './app.component';
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
import { ErrorComponent } from './error/error.component';

export const AppRoutes: Routes = [
  { path: "", redirectTo: "acomponent", pathMatch: "full" },
  { path: "acomponent", component: AComponent },
  { path: "bcomponent", component: BComponent },
  { path: "ccomponent", component: CComponent },
  { path: "**", component: ErrorComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    AComponent,
    BComponent,
    CComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(AppRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ana componentimiz olan “AppComponent” üzerinde de aşağıdaki gibi çalışmalar gerçekleştirilmiş olsun.

<div class="row">
  <div class="list-group">
    <a routerLink="acomponent" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action active">ASayfası</a>
    <a routerLink="bcomponent" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">BSayfası</a>
    <a routerLink="ccomponent" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">CSayfası</a>
    <a routerLink="errorcomponent" routerLinkActive="active" class="list-group-item list-group-item-action">ErrorSayfası</a>
  </div>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

Eğer ki uygulamanızı herhangi bir noktada herhangi bir componente yönlendirmek istiyorsanız eğer routing navigation kullanabilirsiniz. Biz burada örnek olarak hata alındığı zaman “ErrorComponent” içerisinde tekrardan uygulamayı “AComponent”e yönlendireceğiz.

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
@Component({
  selector: 'app-error',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.css']
})
export class ErrorComponent implements OnInit {

  constructor(private route: Router) { }

  ngOnInit() {
    this.route.navigate(["acomponent"]);
    alert("Hata sayfasından bu sayfaya yönlendirildiniz.")
  }
}

Yukarıdaki kod bloğuna dikkat ederseniz eğer “@angular/router” dizininden import edilen “Router” modülünü kullanmaktayız. Bu modül üzerinden gerekli navigate fonksiyonuna erişmekte ve istenilen componente yönlendirme işlemi gerçekleştirilmektedir.

Angular 4 İle Routing Navigation

Görüldüğü üzere yönlendirme işlemimiz kolay bir şekilde başarıyla gerçekleştirilmiştir.

export const AppRoutes: Routes = [
  { path: "", redirectTo: "acomponent/:params", pathMatch: "full" },
  { path: "acomponent/:params", component: AComponent },
  { path: "bcomponent", component: BComponent },
  { path: "ccomponent", component: CComponent },
  { path: "**", component: ErrorComponent }
];

Eğer ki yönlendirme yapılacak route yapılanması yukarıdaki gibi parametre alıyorsa aşağıdaki gibi ilgili parametreye değer gönderebiliriz.

this.route.navigate(["acomponent", "parametreDegeri"]);

Angular 4 İle Routing Navigation
Burada navigate fonksiyonun dizi tipinde olan ilk parametresinde şöyle bir genellemeye varabiliriz… Dizinin her bir elemanı farklı bir parametre ya da dizinmiş gibi yönlendirme linkine eklenecektir.
Örneğin;

this.route.navigate(["acomponent", "parametreDegeri", "deger2", "deger3", ., ., .]);

şeklinde kullanımda bulunursak eğer yönlendirilecek link
“http://localhost:4200/acomponent/parametreDegeri/deger2/deger3/././.”
şeklinde olacaktır.

Query Params İle Route Navigation

Tüm bunların dışında yönlendirme işlemi sırasında oluşturulacak adrese Query String benzeri olan Query Params değerleride verebiliriz.

this.route.navigate(["acomponent", "parametreDegeri"], { queryParams: { queryParams1: "query1", queryParams2: "query2" } });

İkinci parametre içerisinde “queryParams” ile verilen tüm değerler oluşturulacak linke Query Params olarak eklenmektedir.
Angular 4 İle Routing Navigation

Bu Query Paramsların değerini okuyabilmek için Angular 4 Routing’de Parametre Tanımlama ve Değerini Okuma başlıklı makalemde değindiğim yöntemi uygulayacağız.

Örneğin;

    this.activatedRoute.queryParams.subscribe(p => {
      this.queryParams1 = p.queryParams1;
      this.queryParams2 = p.queryParams2;
    });

şeklinde. Burada tek dikkatli olmanız gereken husus, belirtilen adreste normal parametre değerleri üzerinden örneklendirme yapıldığı için “params” değerleri üzerinde bir subscribe uygulanmıştır. Burada Query Paramslar mevzu bahis olduğundan dolayı “queryParams” değerleri elde edilmesi gerekmektedir. Bu noktaya dikkatinizi çekerim…

Query Params İle RouterLink Oluşturma

Eğer ki oluşturulacak link yapısının Query Params değerleriyle oluşturulmasını istiyorsanız aşağıdaki gibi bir çalışma gerçekleştirebilirsiniz.

    <a [routerLink]="['/acomponent/parametreDegeri']" [queryParams]="{queryParams1: 'query1', queryParams2: 'query2'}" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action active">ASayfası</a>

Burada [routerLink] ile yolumuzu belirtiyoruz. [queryParams] içerisinde ise bu linke tıklandığında taşımak istediğimiz verileri Query Params değerlerine veriyoruz. Gerisi bildiğiniz link yapısında kullanılan attributelardır.

Evet… Angular ile Route Navigation üzerine oldukça geniş kapsamlı bir içerik oluşturmuş olduk.

Faydalanmanız dileğiyle…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*