<\/div>\n

Merhaba,<\/p>\n

Single Page Application \u015feklinde nitelendirdi\u011fimiz web tabanl\u0131 uygulamalar geli\u015ftirmemizi sa\u011flayan Angular mimarisi, sayfa taleplerine cevap olarak component yap\u0131lar\u0131 ile kar\u015f\u0131l\u0131k verdi\u011finden dolay\u0131 uygulaman\u0131n bel kemi\u011fi tek bir router outlet’a ba\u011flanmakta ve son kullanc\u0131yla yap\u0131lan etkile\u015fimlerin b\u00fcy\u00fck \u00e7o\u011funlu\u011fu bu noktaya olan temasla neticelendirilmektedir. Bu makalemizde “router outlet’e gelen bir component, i\u00e7erisinde farkl\u0131 y\u00f6nlendirmeler ve bunun yan\u0131nda farkl\u0131 router outlet bar\u0131nd\u0131rabilir mi?<\/em>” sorusuna kar\u015f\u0131l\u0131k “evet” cevab\u0131n\u0131 verecek ve bunun nas\u0131l sa\u011flanaca\u011f\u0131 \u00fczerine teknik boyutta detayl\u0131 bir izahatte bulunaca\u011f\u0131z.<\/p>\n

Tabi t\u00fcm olay\u0131 ad\u0131m ad\u0131m in\u015fa edilmi\u015f bir \u00e7al\u0131\u015fma \u00fczerinden senaryola\u015ft\u0131rarak izah etmeye \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n

\u0130lk olarak bootstrap ve jquery k\u00fct\u00fcphanelerinin entegre edildi\u011fini varsayd\u0131\u011f\u0131m\u0131z bir Angular 6(asl\u0131nda versiyon o kadar da \u00f6nemli de\u011fil<\/span>) projesi olu\u015fturuyoruz.<\/p>\n

Proje i\u00e7erisinde “Home”, “About”, “Contact” ve “Products” componentlerini olu\u015fturuyoruz.<\/p>\n

\r\nng g c home\r\nng g c about\r\nng g c contact\r\nng g c products\r\n<\/pre>\nArd\u0131ndan ana mod\u00fcl sayfam\u0131zda a\u015fa\u011f\u0131daki gibi route(rota) \u015femalar\u0131n\u0131 olu\u015fturup uygulamaya import ediyoruz.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HomeComponent } from '.\/home\/home.component';\r\nimport { AboutComponent } from '.\/about\/about.component';\r\nimport { ContactComponent } from '.\/contact\/contact.component';\r\nimport { ProductsComponent } from '.\/products\/products.component';\r\nimport { Route, RouterModule } from '@angular\/router';\r\n\r\nexport const appRoutes: Route[] = [\r\n  { path: '', redirectTo: '\/home', pathMatch: 'full' },\r\n  { path: 'home', component: HomeComponent },\r\n  { path: 'about', component: AboutComponent },\r\n  { path: 'contact', component: ContactComponent },\r\n  { path: 'products', component: ProductsComponent }\r\n];\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    HomeComponent,\r\n    AboutComponent,\r\n    ContactComponent,\r\n    ProductsComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    RouterModule.forRoot(appRoutes)\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nSon olarak ana componentimizin g\u00f6r\u00fcnt\u00fcs\u00fc olan “app.component.html” dosyas\u0131nda a\u015fa\u011f\u0131daki gibi tasar\u0131m\u0131m\u0131z\u0131 in\u015fa ediyoruz.<\/p>\n
\r\n<ul class="nav">\r\n  <li class="nav-item">\r\n    <a class="nav-link active" routerLink="home">Home<\/a>\r\n  <\/li>\r\n  <li class="nav-item">\r\n    <a class="nav-link" routerLink="about">About<\/a>\r\n  <\/li>\r\n  <li class="nav-item">\r\n    <a class="nav-link" routerLink="contact">Contact<\/a>\r\n  <\/li>\r\n  <li class="nav-item">\r\n    <a class="nav-link disabled" routerLink="products">Products<\/a>\r\n  <\/li>\r\n<\/ul>\r\n<div>\r\n  <router-outlet><\/router-outlet>\r\n<\/div>\r\n<\/pre>\n\u015eimdi bu noktaya kadar asl\u0131nda bildi\u011fimiz Angular’da route i\u015flemlerini ger\u00e7ekle\u015ftirdik ve yap\u0131lan talepler neticesinde url’de ki adrese g\u00f6re ilgili componenti y\u00f6nlendirmede bulunmu\u015f olduk.<\/p>\n
\u0130\u015fte bu noktadan itibaren “Products” isimli componentimiz i\u00e7erisinde birden fazla product’a olan y\u00f6nlendirmeler i\u00e7in de bir route outlet tan\u0131mlayal\u0131m. Tabi \u00f6ncelikle birden fazla product’\u0131m\u0131z\u0131 olu\u015ftural\u0131m.<\/p>\n
\r\nng g c product1\r\nng g c product2\r\nng g c product3\r\nng g c product4\r\nng g c product5\r\n<\/pre>\nBu product’lar “products” componenti alt\u0131nda y\u00f6nlendirileceklerinden dolay\u0131 route yap\u0131lanmas\u0131nda “products”a ait childs olarak eklenmeleri gerekmektedir.<\/p>\n
\r\n.\r\n.\r\n.\r\nexport const appRoutes: Route[] = [\r\n  { path: '', redirectTo: '\/home', pathMatch: 'full' },\r\n  { path: 'home', component: HomeComponent },\r\n  { path: 'about', component: AboutComponent },\r\n  { path: 'contact', component: ContactComponent },\r\n  {\r\n    path: 'products', component: ProductsComponent, children: [\r\n      { path: "product1", component: Product1Component },\r\n      { path: "product2", component: Product2Component },\r\n      { path: "product3", component: Product3Component },\r\n      { path: "product4", component: Product4Component },\r\n      { path: "product5", component: Product5Component }\r\n    ]\r\n  }\r\n];\r\n.\r\n.\r\n.\r\n<\/pre>\nBu i\u015flemden sonra “products.component.html” dosyas\u0131n\u0131n i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi tasarlayal\u0131m.<\/p>\n
\r\n<div class="row">\r\n  <div class="col-sx-4">\r\n    <ul class="list-group">\r\n      <li class="list-group-item" routerLink="product1">Product 1<\/li>\r\n      <li class="list-group-item" routerLink="product2">Product 2<\/li>\r\n      <li class="list-group-item" routerLink="product3">Product 3<\/li>\r\n      <li class="list-group-item" routerLink="product4">Product 4<\/li>\r\n      <li class="list-group-item" routerLink="product5">Product 5<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <div class="col-sx-8">\r\n    <router-outlet><\/router-outlet>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\nEvet…
\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere bu \u015fekilde bir tasar\u0131 ger\u00e7ekle\u015ftirdi\u011fimizde de ba\u015far\u0131yla birden fazla router outlet kullanabilmekteyiz.
\n<\/a>
\nBurada dikkat etmeniz gereken husus, tercih etti\u011fimiz yakla\u015f\u0131mda child componentler y\u00f6nlendirilirken parent componentin adresinin yan\u0131na “parent-route\/child-route” olacak \u015fekilde adres olu\u015fturmaktad\u0131rlar.<\/p>\n
Route Yap\u0131lanmas\u0131nda Outlet Tan\u0131mlama<\/h3>\nMultiple Router Outlet yap\u0131s\u0131n\u0131 tasarlayabilmek i\u00e7in bir ba\u015fka yakla\u015f\u0131m\u0131m\u0131z ise route yap\u0131lanmas\u0131nda outlet tan\u0131mlamas\u0131d\u0131r. Uygulamada “name” \u00f6zelli\u011fi belirtilen router outlet’e, route yap\u0131lanmas\u0131nda “outlet” de\u011feriyle eri\u015fim sa\u011flanmakta ve bu \u015fekilde hangi componentin hangi route outlet alan\u0131nda yay\u0131nlanaca\u011f\u0131 belirtilmektedir.<\/p>\n
\u00d6rne\u011fimizde “products.component.html” dosyas\u0131ndaki router outlet’e a\u015fa\u011f\u0131daki gibi name \u00f6zelli\u011fi atayal\u0131m.<\/p>\n\r\n<div class="row">\r\n  <div class="col-sx-4">\r\n    <ul class="list-group">\r\n      <li class="list-group-item" routerLink="product1">Product 1<\/li>\r\n      <li class="list-group-item" routerLink="product2">Product 2<\/li>\r\n      <li class="list-group-item" routerLink="product3">Product 3<\/li>\r\n      <li class="list-group-item" routerLink="product4">Product 4<\/li>\r\n      <li class="list-group-item" routerLink="product5">Product 5<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <div class="col-sx-8">\r\n    <router-outlet name="productOutlet"><\/router-outlet>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\nArd\u0131ndan route \u015fablonumuzda a\u015fa\u011f\u0131daki gibi bu tan\u0131mlamaya uygun “outlet” de\u011ferlerini belirtelim.<\/p>\n\r\n.\r\n.\r\n.\r\nexport const appRoutes: Route[] = [\r\n  { path: '', redirectTo: '\/home', pathMatch: 'full' },\r\n  { path: 'home', component: HomeComponent },\r\n  { path: 'about', component: AboutComponent },\r\n  { path: 'contact', component: ContactComponent },\r\n  {\r\n    path: 'products', component: ProductsComponent, children: [\r\n      { path: "product1", component: Product1Component, outlet: "productOutlet" },\r\n      { path: "product2", component: Product2Component, outlet: "productOutlet" },\r\n      { path: "product3", component: Product3Component, outlet: "productOutlet" },\r\n      { path: "product4", component: Product4Component, outlet: "productOutlet" },\r\n      { path: "product5", component: Product5Component, outlet: "productOutlet" }\r\n    ]\r\n  }\r\n];\r\n.\r\n.\r\n.\r\n<\/pre>\nBu \u015fekilde child componentlerden hangilerinin hangi route outlet’te yay\u0131nlanaca\u011f\u0131n\u0131 belirtmi\u015f oluyoruz.<\/p>\n
Bu i\u015flemden sonra “products.component.html” dosyas\u0131n\u0131 tekrardan a\u00e7\u0131p ilgili routerLink y\u00f6nlendirmelerini a\u015fa\u011f\u0131daki gibi d\u00fczenliyoruz.<\/p>\n\r\n<div class="row">\r\n  <div class="col-sx-4">\r\n    <ul class="list-group">\r\n      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product1']}}]">Product 1<\/li>\r\n      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product2']}}]">Product 2<\/li>\r\n      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product3']}}]">Product 3<\/li>\r\n      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product4']}}]">Product 4<\/li>\r\n      <li class="list-group-item" [routerLink]="[{outlets:{productOutlet:['product5']}}]">Product 5<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <div class="col-sx-8">\r\n    <router-outlet name="productOutlet"><\/router-outlet>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\nBurada kullan\u0131lan “[{outlets:{productOutlet:[‘product1’]}}]” de\u011ferini izah edersek e\u011fer; “outlets” tan\u0131mlamas\u0131yla uygulamada birazdan ad\u0131n\u0131 belirtece\u011fimiz herhangi bir outlet \u00fczerinde \u00e7al\u0131\u015facak bir adres oldu\u011funu belirtmekteyiz. Devam\u0131nda bu outlet’in “productOutlet” de\u011feri ile e\u015fde\u011fer olaca\u011f\u0131n\u0131 belirtiyoruz ve “[‘product1’]” alan\u0131 ilede \u00e7al\u0131\u015ft\u0131raca\u011f\u0131 child component’in “path” de\u011ferini belirtiyoruz.<\/p>\nUygulamay\u0131 bu \u015fekilde yap\u0131land\u0131rd\u0131ktan sonra;
\n<\/a>
\n\u015feklinde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmekteyiz. <\/p>\n
Bu ikinci kullan\u0131m, daha kompleks ve ayn\u0131 component i\u00e7erisinde ikiden fazla route outlet yap\u0131lanmas\u0131 s\u00f6z konusu oldu\u011fu durumlarda tercih edilebilir bir mahiyettedir.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Single Page Application \u015feklinde nitelendirdi\u011fimiz web tabanl\u0131 uygulamalar geli\u015ftirmemizi sa\u011flayan Angular mimarisi, sayfa taleplerine cevap olarak component yap\u0131lar\u0131 ile kar\u015f\u0131l\u0131k verdi\u011finden dolay\u0131 uygulaman\u0131n bel kemi\u011fi tek bir router outlet’a ba\u011flanmakta ve son kullanc\u0131yla...<\/p>\n","protected":false},"author":1,"featured_media":9823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2599],"tags":[2156,2600,2685],"class_list":["post-9797","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-6","tag-angular","tag-angular-6","tag-multiple-router-outlet"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=9797"}],"version-history":[{"count":23,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9797\/revisions"}],"predecessor-version":[{"id":9824,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9797\/revisions\/9824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/9823"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=9797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}