<\/div>\n

Merhaba,<\/p>\n

Bir \u00f6nceki Angular 4 \u2013 Route Guards CanActivate<\/a> ba\u015fl\u0131kl\u0131 makalemde Angular uygulamalar\u0131nda Route Guards yap\u0131s\u0131ndan s\u00f6z ederek CanActivate yakla\u015f\u0131m\u0131n\u0131 de\u011ferlendirmi\u015ftik. CanActivate yakla\u015f\u0131m\u0131, kullan\u0131c\u0131y\u0131 y\u00f6nlendirirken detayl\u0131 kontrol mekanizmas\u0131 sa\u011flamaktad\u0131r. Hatta ilgili makalemde bu konuyla alakal\u0131 oturum a\u00e7ma senaryosunu \u00f6rnek olarak vermi\u015f, bir sayfaya eri\u015fim sa\u011flamaya \u00e7al\u0131\u015fan kullan\u0131c\u0131 e\u011fer oturumu girmemi\u015fse login sayfas\u0131na y\u00f6nlendirmi\u015ftik.<\/p>\n

Bu i\u00e7eri\u011fimizde ise Route Guards yap\u0131s\u0131nda CanDeactivate yakla\u015f\u0131m\u0131n\u0131 de\u011ferlendirece\u011fiz. Bu yakla\u015f\u0131m\u0131n k\u0131sa ve \u00f6z tarifi, kullan\u0131ld\u0131\u011f\u0131 sayfadan ba\u015fka sayfaya ge\u00e7i\u015f kontrol\u00fc getirmesidir. Tabi bu kontrol\u00fc bizler belirli ko\u015fullara ba\u011flayarak hareket edece\u011fiz.<\/p>\n

CanDeactivate i\u00e7in s\u0131ca s\u0131ca\u011f\u0131na bir \u00f6rnek vermek gerekirse e\u011fer kullan\u0131c\u0131larla etkile\u015fime giren form yap\u0131lar\u0131n\u0131n bulundu\u011fu sayfalar\u0131 \u00f6rnek olarak verebiliriz. Mesela \u015firketinizin ileti\u015fim formuna dakikalarca t\u00fcm duygu ve d\u00fc\u015f\u00fcncesini yans\u0131tan kullan\u0131c\u0131n\u0131n klavyede yanl\u0131\u015f bir tu\u015fa basmas\u0131ndan ya da fareyle hi\u00e7 hesaplamad\u0131\u011f\u0131 taray\u0131c\u0131n\u0131n \u00e7\u0131k\u0131\u015f(X) butonuna t\u0131klamas\u0131ndan do\u011facak olan zayiat kullan\u0131c\u0131da zaafiyete sebep olacakt\u0131r ve ayn\u0131 emek ve gayreti birdaha ya\u015fatma zarureti muhtemelen vazge\u00e7meyle sonu\u00e7lacakt\u0131r.<\/p>\n

\u0130\u015fte bizlerin web geli\u015ftiricisi olarak bu tarz durumlara kar\u015f\u0131 kullan\u0131c\u0131 merkezli \u00f6nlemler almam\u0131z gerekmekte ve form nesnelerine girilen herhangi bir de\u011fer varsa o de\u011ferler post edilmedi\u011fi s\u00fcrece ba\u015fka sayfaya ge\u00e7i\u015fi engellememiz gerekmektedir.<\/p>\n

Ahanda b\u00f6yle durumlarda Route Guards yap\u0131s\u0131n\u0131n CanDeactivate yakla\u015f\u0131m\u0131 ihtiyac\u0131m\u0131z\u0131 yeterince kar\u015f\u0131l\u0131k verebilecektir… \ud83d\ude42<\/p>\n

\u015eimdi bahsetti\u011fimiz \u00f6rnek mant\u0131kta olay\u0131 pratikle\u015ftirelim ve ger\u00e7ek bir senaryo \u00fczerinden CanDeactivate yakla\u015f\u0131m\u0131n\u0131n nas\u0131l uyguland\u0131\u011f\u0131n\u0131 ele alal\u0131m.<\/p>\n

Diyelim ki \u015firketinizin sitesinde “\u0130leti\u015fim” ve “\u00dcr\u00fcnler” sayfas\u0131 olsun.<\/p>\n

\r\nexport const AppRouter: Route[] = [\r\n  { path: "", redirectTo: "\/urunler", pathMatch: "full" },\r\n  { path: "urunler", component: UrunlerComponent },\r\n  { path: "iletisim", component: IletisimComponent }\r\n];\r\n<\/pre>\nHemen ileti\u015fim componentinde gerekli form \u00e7al\u0131\u015fmas\u0131n\u0131 in\u015fa edelim.<\/p>\n\r\n<form [formGroup]="frmIletisim" (ngSubmit)="MesajIlet(frmIletisim.value)">\r\n  <div>\r\n    Ad\u0131n\u0131z\r\n    <br>\r\n    <input placeholder="Ad\u0131n\u0131z..." type="text" formControlName="txtAd">\r\n  <\/div>\r\n  <div>\r\n    Soyad\u0131n\u0131z\r\n    <br>\r\n    <input placeholder="Soyad\u0131n\u0131z..." type="text" formControlName="txtSoyad">\r\n  <\/div>\r\n  <div>\r\n    Mesaj\u0131n\u0131z\r\n    <br>\r\n    <textarea placeholder="Mesaj\u0131n\u0131z..." formControlName="txtMesaj" rows="5"><\/textarea>\r\n  <\/div>\r\n  <div>\r\n    <button>Mesaj\u0131 G\u00f6nder<\/button>\r\n  <\/div>\r\n<\/form>\r\n<\/pre>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormGroup, FormControl } from "@angular\/forms";\r\n@Component({\r\n  selector: 'app-iletisim',\r\n  templateUrl: '.\/iletisim.component.html',\r\n  styleUrls: ['.\/iletisim.component.css']\r\n})\r\nexport class IletisimComponent implements OnInit {\r\n  frmIletisim;\r\n  constructor() { }\r\n  ngOnInit() {\r\n    this.frmIletisim = new FormGroup({\r\n      txtAd: new FormControl(),\r\n      txtSoyad: new FormControl(),\r\n      txtMesaj: new FormControl()\r\n    });\r\n  }\r\n  MesajIlet(data) {\r\n    alert(data.txtAd + " " + data.txtSoyad + " " + data.txtMesaj);\r\n  }\r\n}\r\n<\/pre>\nEvet art\u0131k formumuz haz\u0131r. \u015e\u00f6yle bir g\u00f6z atarsak e\u011fer formumuza veri girildi\u011fi vakit olas\u0131 sayfa de\u011fi\u015fikli\u011fi yahut taray\u0131c\u0131 kapatma durumlar\u0131nda ilgili veri g\u00f6z ard\u0131 edilmekte ve yanl\u0131\u015fl\u0131kla yap\u0131lan aksiyon neyse ger\u00e7ekle\u015ftirilmektedir.
\n<\/a><\/p>\n
\u015eimdi Route Guards CanDeactivate kontrol\u00fcn\u00fc sa\u011flayabilmek i\u00e7in “FormKontrol” isminde bir s\u0131n\u0131f olu\u015ftural\u0131m.<\/p>\n
\r\nimport { CanDeactivate } from "@angular\/router";\r\nimport { IletisimComponent } from ".\/iletisim\/iletisim.component";\r\nimport { Observable } from "rxjs\/Observable";\r\n\r\nexport class FormKontrol implements CanDeactivate<IletisimComponent> {\r\n    canDeactivate(component: IletisimComponent): boolean | Observable<boolean> {\r\n        alert("Ba\u015fka sayfaya ge\u00e7i\u015f yasak...");\r\n        return false;\r\n    }\r\n}\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere s\u0131n\u0131f\u0131m\u0131z\u0131 olu\u015fturduk. “CanDeactivate” interface’ini hangi componente \u00f6zel kullanacaksak o componenti(IletisimComponent) Generic olacak \u015fekilde belirterek s\u0131n\u0131fa implement ediyoruz ve bu i\u015flem sonucunda “canDeactivate” metodunu uygulam\u0131\u015f oluyoruz. Bu metot geriye boolean tipte de\u011fer d\u00f6nen bir fonksiyondur. Belirtilen component \u00fczerinde(IletisimComponent) farkl\u0131 bir sayfaya ge\u00e7i\u015f talebi geldi\u011finde ilgili metot true de\u011feri d\u00f6nd\u00fcr\u00fcrse ge\u00e7i\u015f sa\u011flanacak yok e\u011fer false de\u011feri d\u00f6nd\u00fcr\u00fcrse ge\u00e7i\u015f engellenmi\u015f olacakt\u0131r.<\/p>\n
Peki componentimiz bu s\u0131n\u0131f\u0131n CanDeactivate s\u0131n\u0131f\u0131 olup olmad\u0131\u011f\u0131n\u0131 nereden bilecek?<\/strong> diye sorabilirsiniz. Nas\u0131l ki \u00f6nceki yaz\u0131m\u0131zda CanActivate’e \u00f6zel s\u0131n\u0131f\u0131 route yap\u0131lanmas\u0131nda “canActivate” \u00f6zelli\u011finde belirttiysek, benzer \u015fekilde bu s\u0131n\u0131f\u0131da route yap\u0131lanmas\u0131nda “canDeactivate” \u00f6zelli\u011finde belirtece\u011fiz. <\/p>\n\r\nexport const AppRouter: Route[] = [\r\n  { path: "", redirectTo: "\/urunler", pathMatch: "full" },\r\n  { path: "urunler", component: UrunlerComponent },\r\n  { path: "iletisim", component: IletisimComponent, canDeactivate: [FormKontrol] }\r\n];\r\n<\/pre>\nVee tabi bu i\u015flemden sonra ilgili s\u0131n\u0131f\u0131 ana mod\u00fcl\u00fcm\u00fczde provider \u00f6zelli\u011fine eklememiz gerekecektir. Ben zihinlerde hi\u00e7bir kar\u0131\u015f\u0131kl\u0131\u011fa mahal vermemek i\u00e7in t\u00fcm “app.module” dosyas\u0131n\u0131n i\u00e7eri\u011fini a\u015fa\u011f\u0131ya al\u0131yorum.<\/p>\n\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { Route, RouterModule } from "@angular\/router";\r\nimport { ReactiveFormsModule, FormControl } from "@angular\/forms";\r\nimport { AppComponent } from '.\/app.component';\r\nimport { UrunlerComponent } from '.\/urunler\/urunler.component';\r\nimport { IletisimComponent } from '.\/iletisim\/iletisim.component';\r\nimport { FormKontrol } from '.\/form-kontrol';\r\nexport const AppRouter: Route[] = [\r\n  { path: "", redirectTo: "\/urunler", pathMatch: "full" },\r\n  { path: "urunler", component: UrunlerComponent },\r\n  { path: "iletisim", component: IletisimComponent, canDeactivate: [FormKontrol] }\r\n];\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    UrunlerComponent,\r\n    IletisimComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    RouterModule.forRoot(AppRouter),\r\n    ReactiveFormsModule\r\n  ],\r\n  providers: [FormKontrol],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nEvet… \u015eimdi uygulamam\u0131z\u0131 kaydedip, \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi bir s\u0131k\u0131nt\u0131yla kar\u015f\u0131la\u015faca\u011f\u0131z.
\n<\/a>
\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere form doluda olsa bo\u015fta olsa ba\u015fka bir sayfaya ge\u00e7i\u015f izni verilmemektedir. Bizler sadece form doluyken bu kontrol\u00fc sa\u011flamak istiyoruz. Mant\u0131kl\u0131 olan formda herhangi bir de\u011fer yoksa ba\u015fka sayfaya ge\u00e7i\u015f yap\u0131labilmesidir. Bu handikaptan kurtulmak i\u00e7in yazm\u0131\u015f oldu\u011fumuz “FormKontrol” s\u0131n\u0131f\u0131na g\u00f6z atmal\u0131y\u0131z. Evet, burada dikkat ederseniz “canDeactivate” metodunda false de\u011feri d\u00f6nd\u00fc\u011f\u00fc i\u00e7in her durumda “IletisimComponent” sayfas\u0131ndan ba\u015fka sayfalara ge\u00e7i\u015f izni verilmeyecektir.<\/p>\n
Burada componentin durumuna g\u00f6re bir de\u011ferlendirme olmad\u0131\u011f\u0131 i\u00e7in bir mant\u0131k hatas\u0131 s\u00f6z konusudur. Yap\u0131lmas\u0131 gereken “IletisimComponent” s\u0131n\u0131f\u0131nda form durumu de\u011ferlendirilmeli ve bu duruma g\u00f6re “FormKontrol” s\u0131n\u0131f\u0131nda \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirilmelidir.<\/p>\n
\r\n<form  [formGroup]="frmIletisim" (ngSubmit)="MesajIlet(frmIletisim.value)">\r\n  <div>\r\n    Ad\u0131n\u0131z\r\n    <br>\r\n    <input (change)="txtAd=$event.target.value;" placeholder="Ad\u0131n\u0131z..." type="text" formControlName="txtAd">\r\n  <\/div>\r\n  <div>\r\n    Soyad\u0131n\u0131z\r\n    <br>\r\n    <input (change)="txtSoyad=$event.target.value;" placeholder="Soyad\u0131n\u0131z..." type="text" formControlName="txtSoyad">\r\n  <\/div>\r\n  <div>\r\n    Mesaj\u0131n\u0131z\r\n    <br>\r\n    <textarea (change)="txtMesaj=$event.target.value;" placeholder="Mesaj\u0131n\u0131z..." formControlName="txtMesaj" rows="5"><\/textarea>\r\n  <\/div>\r\n  <div>\r\n    <button>Mesaj\u0131 G\u00f6nder<\/button>\r\n  <\/div>\r\n<\/form>\r\n<\/pre>\nT\u00fcm form elemanlar\u0131na change event\u0131 eklenmi\u015ftir ve o anki de\u011ferleri elde edilerek componentteki de\u011fi\u015fkenlere aktar\u0131lm\u0131\u015ft\u0131r.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormGroup, FormControl } from "@angular\/forms";\r\n@Component({\r\n  selector: 'app-iletisim',\r\n  templateUrl: '.\/iletisim.component.html',\r\n  styleUrls: ['.\/iletisim.component.css']\r\n})\r\nexport class IletisimComponent implements OnInit {\r\n  txtAd: string = "";\r\n  txtSoyad: string = "";\r\n  txtMesaj: string = "";\r\n  frmIletisim;\r\n  FormKontrol(): boolean {\r\n    if (this.txtAd.length > 0 || this.txtSoyad.length > 0 || this.txtMesaj.length > 0)\r\n      return false;\r\n    return true;\r\n  }\r\n  constructor() { }\r\n  ngOnInit() {\r\n    this.frmIletisim = new FormGroup({\r\n      txtAd: new FormControl(),\r\n      txtSoyad: new FormControl(),\r\n      txtMesaj: new FormControl()\r\n    });\r\n  }\r\n  MesajIlet(data) {\r\n    alert(data.txtAd + " " + data.txtSoyad + " " + data.txtMesaj);\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “IletisimComponent” s\u0131n\u0131f\u0131nda “FormKontrol” metodu ile form de\u011ferleri kontrol edilmekte ve duruma g\u00f6re geriye boolean de\u011fer d\u00f6nd\u00fcr\u00fclmektedir. \u0130\u015fte bu fonksiyonu “FormKontrol” s\u0131n\u0131f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi kullanabiliriz;<\/p>\n\r\nimport { CanDeactivate } from "@angular\/router";\r\nimport { IletisimComponent } from ".\/iletisim\/iletisim.component";\r\nimport { Observable } from "rxjs\/Observable";\r\n\r\nexport class FormKontrol implements CanDeactivate<IletisimComponent> {\r\n    canDeactivate(component: IletisimComponent): boolean | Observable<boolean> {\r\n        if (!component.FormKontrol()) {\r\n            alert("Ba\u015fka sayfaya ge\u00e7i\u015f yasak...");\r\n            return false;\r\n        }\r\n        return true;\r\n    }\r\n}\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “FormKontrol” s\u0131n\u0131f\u0131ndaki “canDeactivate” fonksiyonuna tan\u0131mlad\u0131\u011f\u0131m\u0131z “component” parametresi bizlere \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131z componenti getirmektedir. Dolay\u0131s\u0131yla ilgili componentimizde tan\u0131mlad\u0131\u011f\u0131m\u0131z “FormKontrol” isimli metoda eri\u015febilmekte ve metodun de\u011ferlendirmesine g\u00f6re sayfa ge\u00e7i\u015f izni verilmekte yahut verilmemektedir.
\n<\/a><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere amac\u0131m\u0131za uygun i\u015flevsellikte bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirmi\u015f bulunmaktay\u0131z.<\/p>\n
Peki hoca, ben ba\u015fka bir componentte de “FormKontrol” s\u0131n\u0131f\u0131n\u0131 kullanmak istesem nas\u0131l olacak?<\/strong> diye sorabilirsiniz ki g\u00fczel bir soru… “FormKontrol” s\u0131n\u0131f\u0131 “IletisimComponent” s\u0131n\u0131f\u0131na uygun bir \u015fekilde tasarland\u0131\u011f\u0131 i\u00e7in ilgili component d\u0131\u015f\u0131nda ba\u015fka bir componentte \u00e7al\u0131\u015fmayacakt\u0131r. Dolay\u0131s\u0131yla \u015fu anki vaziyette “FormKontrol” s\u0131n\u0131f\u0131n\u0131 ba\u015fka bir component i\u00e7in kullanamayaca\u011f\u0131z. Yapmam\u0131z gereken ya her bir component i\u00e7in farkl\u0131 bir “FormKontrol” s\u0131n\u0131f\u0131na benzer s\u0131n\u0131f olu\u015fturmak (tabi ki de b\u00f6yle bir y\u00f6ntemi tercih etmeyece\u011fiz, ay\u0131pt\u0131r<\/span> \ud83d\ude42 ) ya da OOP’nin nimetlerinden faydalan\u0131p olu\u015fturdu\u011fumuz “FormKontrol” s\u0131n\u0131f\u0131n\u0131 daha evrensel bir hale getirece\u011fiz. Haliyle bizler ikinci y\u00f6ntemi tercih edecek ve “FormKontrol” s\u0131n\u0131f\u0131n\u0131 “IletisimComponent” s\u0131n\u0131f\u0131na olan ba\u011f\u0131ml\u0131l\u0131ktan kurtaracak, bir nevi Dependency Injection<\/a> yaparak ba\u011f\u0131ms\u0131z bir s\u0131n\u0131f haline getirece\u011fiz.<\/p>\n
Bu i\u015flem i\u00e7in a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz.<\/p>\n
\r\nimport { CanDeactivate } from "@angular\/router";\r\nimport { IletisimComponent } from ".\/iletisim\/iletisim.component";\r\nimport { Observable } from "rxjs\/Observable";\r\n\r\nexport interface IFormKontrol {\r\n    FormKontrol(): boolean | Observable<boolean>;\r\n}\r\n\r\nexport class FormKontrol implements CanDeactivate<IFormKontrol> {\r\n    canDeactivate(component: IFormKontrol): boolean | Observable<boolean> {\r\n        if (!component.FormKontrol()) {\r\n            alert("Ba\u015fka sayfaya ge\u00e7i\u015f yasak...");\r\n            return false;\r\n        }\r\n        return true;\r\n    }\r\n}\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “IFormKontrol” isminde bir interface olu\u015fturularak i\u00e7erisine geriye boolean tipte de\u011fer d\u00f6nen “FormKontrol” isminde bir metot tan\u0131mlanm\u0131\u015ft\u0131r. “FormKontrol” s\u0131n\u0131f\u0131m\u0131zda ise implement edilen “CanDeactivate” interface’inde olu\u015fturdu\u011fumuz “IFormKontrol” interface’i Generic olarak belirtilmi\u015ftir. Dolay\u0131s\u0131yla “FormKontrol” s\u0131n\u0131f\u0131 t\u00fcm “IFormKontrol” s\u0131n\u0131f\u0131n\u0131 uygulayan componentler i\u00e7in CanDeactivate kontrol\u00fc g\u00f6rebilecektir.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormGroup, FormControl } from "@angular\/forms";\r\nimport { IFormKontrol } from '..\/form-kontrol';\r\n\r\n@Component({\r\n  selector: 'app-iletisim',\r\n  templateUrl: '.\/iletisim.component.html',\r\n  styleUrls: ['.\/iletisim.component.css']\r\n})\r\nexport class IletisimComponent implements OnInit, IFormKontrol {\r\n  txtAd: string = "";\r\n  txtSoyad: string = "";\r\n  txtMesaj: string = "";\r\n  frmIletisim;\r\n  FormKontrol(): boolean {\r\n    if (this.txtAd.length > 0 || this.txtSoyad.length > 0 || this.txtMesaj.length > 0)\r\n      return false;\r\n    return true;\r\n  }\r\n  constructor() { }\r\n  ngOnInit() {\r\n    this.frmIletisim = new FormGroup({\r\n      txtAd: new FormControl(),\r\n      txtSoyad: new FormControl(),\r\n      txtMesaj: new FormControl()\r\n    });\r\n  }\r\n  MesajIlet(data) {\r\n    alert(data.txtAd + " " + data.txtSoyad + " " + data.txtMesaj);\r\n  }\r\n}\r\n<\/pre>\n“IletisimComponent” d\u0131\u015f\u0131nda ba\u015fka bir component \u00fczerinde denersek e\u011fer;<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { IFormKontrol } from '..\/form-kontrol';\r\n@Component({\r\n  selector: 'app-yorum',\r\n  templateUrl: '.\/yorum.component.html',\r\n  styleUrls: ['.\/yorum.component.css']\r\n})\r\nexport class YorumComponent implements OnInit, IFormKontrol {\r\n  constructor() { }\r\n  txtYorum: string = "";\r\n  FormKontrol() {\r\n    if (this.txtYorum.length > 0)\r\n      return false;\r\n    return true;\r\n  }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\r\n<input type="text" [(ngModel)]="txtYorum"\/>\r\n<button>G\u00f6nder<\/button>\r\n<\/pre>\n\r\nexport const AppRouter: Route[] = [\r\n  { path: "", redirectTo: "\/urunler", pathMatch: "full" },\r\n  { path: "urunler", component: UrunlerComponent },\r\n  { path: "iletisim", component: IletisimComponent, canDeactivate: [FormKontrol] },\r\n  { path: "yorum", component: YorumComponent, canDeactivate: [FormKontrol] }\r\n];\r\n<\/pre>\nGerekli alanlara yeni componentimizin adresinide verdikten sonra a\u015fa\u011f\u0131daki gibi “FormKontrol” s\u0131n\u0131f\u0131m\u0131z\u0131n bir componente ba\u011f\u0131ms\u0131z olacak \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz.
\n<\/a><\/p>\n
Evet, Bu makalemiz neticesinde Angular 4 ile Route Guards yap\u0131lar\u0131n\u0131da incelemi\u015f olduk.<\/p>\n
Umar\u0131m faydal\u0131 bir yaz\u0131 olmu\u015ftur.<\/p>\n
Sonraki yaz\u0131lar\u0131m\u0131zda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki Angular 4 \u2013 Route Guards CanActivate ba\u015fl\u0131kl\u0131 makalemde Angular uygulamalar\u0131nda Route Guards yap\u0131s\u0131ndan s\u00f6z ederek CanActivate yakla\u015f\u0131m\u0131n\u0131 de\u011ferlendirmi\u015ftik. CanActivate yakla\u015f\u0131m\u0131, kullan\u0131c\u0131y\u0131 y\u00f6nlendirirken detayl\u0131 kontrol mekanizmas\u0131 sa\u011flamaktad\u0131r. Hatta ilgili makalemde bu konuyla...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2146,2396,2393,2392,2395,2388,2394],"class_list":["post-8258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4","tag-angular-4-candeactivate","tag-angular-4-route-guards","tag-angular-route-guards","tag-candeactivate","tag-route-guards","tag-route-guards-candeactivate"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8258","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=8258"}],"version-history":[{"count":27,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8258\/revisions"}],"predecessor-version":[{"id":8289,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8258\/revisions\/8289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}