Angular 6 – Multiple Router Outlet Kullanımı

Merhaba,

Single Page Application şeklinde nitelendirdiğimiz web tabanlı uygulamalar geliştirmemizi sağlayan Angular mimarisi, sayfa taleplerine cevap olarak component yapıları ile karşılık verdiğinden dolayı uygulamanın bel kemiği tek bir router outlet’a bağlanmakta ve son kullancıyla yapılan etkileşimlerin büyük çoğunluğu bu noktaya olan temasla neticelendirilmektedir. Bu makalemizde “router outlet’e gelen bir component, içerisinde farklı yönlendirmeler ve bunun yanında farklı router outlet barındırabilir mi?” sorusuna karşılık “evet” cevabını verecek ve bunun nasıl sağlanacağı üzerine teknik boyutta detaylı bir izahatte bulunacağız.

Tabi tüm olayı adım adım inşa edilmiş bir çalışma üzerinden senaryolaştırarak izah etmeye çalışacağız.

İlk olarak bootstrap ve jquery kütüphanelerinin entegre edildiğini varsaydığımız bir Angular 6(aslında versiyon o kadar da önemli değil) projesi oluşturuyoruz.

Proje içerisinde “Home”, “About”, “Contact” ve “Products” componentlerini oluşturuyoruz.

ng g c home
ng g c about
ng g c contact
ng g c products

Ardından ana modül sayfamızda aşağıdaki gibi route(rota) şemalarını oluşturup uygulamaya import ediyoruz.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { ProductsComponent } from './products/products.component';
import { Route, RouterModule } from '@angular/router';

export const appRoutes: Route[] = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'products', component: ProductsComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    ProductsComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Son olarak ana componentimizin görüntüsü olan “app.component.html” dosyasında aşağıdaki gibi tasarımımızı inşa ediyoruz.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" routerLink="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="about">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="contact">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" routerLink="products">Products</a>
  </li>
</ul>
<div>
  <router-outlet></router-outlet>
</div>

Şimdi bu noktaya kadar aslında bildiğimiz Angular’da route işlemlerini gerçekleştirdik ve yapılan talepler neticesinde url’de ki adrese göre ilgili componenti yönlendirmede bulunmuş olduk.

İşte bu noktadan itibaren “Products” isimli componentimiz içerisinde birden fazla product’a olan yönlendirmeler için de bir route outlet tanımlayalım. Tabi öncelikle birden fazla product’ımızı oluşturalım.

ng g c product1
ng g c product2
ng g c product3
ng g c product4
ng g c product5

Bu product’lar “products” componenti altında yönlendirileceklerinden dolayı route yapılanmasında “products”a ait childs olarak eklenmeleri gerekmektedir.

.
.
.
export const appRoutes: Route[] = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  {
    path: 'products', component: ProductsComponent, children: [
      { path: "product1", component: Product1Component },
      { path: "product2", component: Product2Component },
      { path: "product3", component: Product3Component },
      { path: "product4", component: Product4Component },
      { path: "product5", component: Product5Component }
    ]
  }
];
.
.
.

Bu işlemden sonra “products.component.html” dosyasının içeriğini aşağıdaki gibi tasarlayalım.

<div class="row">
  <div class="col-sx-4">
    <ul class="list-group">
      <li class="list-group-item" routerLink="product1">Product 1</li>
      <li class="list-group-item" routerLink="product2">Product 2</li>
      <li class="list-group-item" routerLink="product3">Product 3</li>
      <li class="list-group-item" routerLink="product4">Product 4</li>
      <li class="list-group-item" routerLink="product5">Product 5</li>
    </ul>
  </div>
  <div class="col-sx-8">
    <router-outlet></router-outlet>
  </div>
</div>

Evet…
Gördüğünüz üzere bu şekilde bir tasarı gerçekleştirdiğimizde de başarıyla birden fazla router outlet kullanabilmekteyiz.
Angular 6 - Multiple Router Outlet Kullanımı
Burada dikkat etmeniz gereken husus, tercih ettiğimiz yaklaşımda child componentler yönlendirilirken parent componentin adresinin yanına “parent-route/child-route” olacak şekilde adres oluşturmaktadırlar.

Route Yapılanmasında Outlet Tanımlama

Multiple Router Outlet yapısını tasarlayabilmek için bir başka yaklaşımımız ise route yapılanmasında outlet tanımlamasıdır. Uygulamada “name” özelliği belirtilen router outlet’e, route yapılanmasında “outlet” değeriyle erişim sağlanmakta ve bu şekilde hangi componentin hangi route outlet alanında yayınlanacağı belirtilmektedir.

Örneğimizde “products.component.html” dosyasındaki router outlet’e aşağıdaki gibi name özelliği atayalım.

<div class="row">
  <div class="col-sx-4">
    <ul class="list-group">
      <li class="list-group-item" routerLink="product1">Product 1</li>
      <li class="list-group-item" routerLink="product2">Product 2</li>
      <li class="list-group-item" routerLink="product3">Product 3</li>
      <li class="list-group-item" routerLink="product4">Product 4</li>
      <li class="list-group-item" routerLink="product5">Product 5</li>
    </ul>
  </div>
  <div class="col-sx-8">
    <router-outlet name="productOutlet"></router-outlet>
  </div>
</div>

Ardından route şablonumuzda aşağıdaki gibi bu tanımlamaya uygun “outlet” değerlerini belirtelim.

.
.
.
export const appRoutes: Route[] = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  {
    path: 'products', component: ProductsComponent, children: [
      { path: "product1", component: Product1Component, outlet: "productOutlet" },
      { path: "product2", component: Product2Component, outlet: "productOutlet" },
      { path: "product3", component: Product3Component, outlet: "productOutlet" },
      { path: "product4", component: Product4Component, outlet: "productOutlet" },
      { path: "product5", component: Product5Component, outlet: "productOutlet" }
    ]
  }
];
.
.
.

Bu şekilde child componentlerden hangilerinin hangi route outlet’te yayınlanacağını belirtmiş oluyoruz.

Bu işlemden sonra “products.component.html” dosyasını tekrardan açıp ilgili routerLink yönlendirmelerini aşağıdaki gibi düzenliyoruz.

<div class="row">
  <div class="col-sx-4">
    <ul class="list-group">
      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product1']}}]">Product 1</li>
      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product2']}}]">Product 2</li>
      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product3']}}]">Product 3</li>
      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product4']}}]">Product 4</li>
      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product5']}}]">Product 5</li>
    </ul>
  </div>
  <div class="col-sx-8">
    <router-outlet name="productOutlet"></router-outlet>
  </div>
</div>

Burada kullanılan “[{outlets:{productOutlet:[‘product1’]}}]” değerini izah edersek eğer; “outlets” tanımlamasıyla uygulamada birazdan adını belirteceğimiz herhangi bir outlet üzerinde çalışacak bir adres olduğunu belirtmekteyiz. Devamında bu outlet’in “productOutlet” değeri ile eşdeğer olacağını belirtiyoruz ve “[‘product1’]” alanı ilede çalıştıracağı child component’in “path” değerini belirtiyoruz.

Uygulamayı bu şekilde yapılandırdıktan sonra;
Angular 6 - Multiple Router Outlet Kullanımı
şeklinde çalıştığını görmekteyiz.

Bu ikinci kullanım, daha kompleks ve aynı component içerisinde ikiden fazla route outlet yapılanması söz konusu olduğu durumlarda tercih edilebilir bir mahiyettedir.

İlgilenenlerin faydalanması 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

*

Copy Protected by Chetan's WP-Copyprotect.