Angular 4 Routing Ve Navigasyon 03.01.2018

Selam arkadaşlar, Angular 4 projemizde routing ve navigasyon nasıl yapılır kısaca anlatacağım:

Routing

1.) Hangi componentin hangi url' de görüntüleneceğini app.module dosyamızda ayarlıyoruz.

import { RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{ path: 'profile/:userid',
component: UserComponent
}
];

@NgModule({
imports: [
RouterModule.forRoot(routes)
]
})

2. Url Parametrelerini de component'imizde şu şekilde alıyoruz;

import { ActivatedRoute} from '@angular/router';
userid:any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
this.getData();

this.route.paramMap.subscribe(params => {
this.userid = params.get('userid');

console.log(this.userid);
});

}

Navigasyon

1.) routerLink özelliği ile yönlendirme yapıyoruz. href kullanırsak tarayıcı js css image vs. kaynakları tekrar yükleyerek render yapacaktır ancak routerLink ile yönlendirme yaptığımızda sadece ilgili sayfa render olacaktır, kullanımı;

Statik:

<a routerLink="/profile/1">Login</a>

Dinamik:

<a [routerLink]="['/profile', user.id]">Profil</a>

Hepsi bu kadar, sevgiler.