[Angular 2] Router basic and Router Params

When we define router in Angualr 2, we use @RouteConcfig()

When we want to display component, we use <router-outlet>

When we want to navigate to component, we use [routerLink]="['routerName']"

When we want to access router params, we use RouterParams

When we want to access Rotuer itself, we use Router



1. In index.html:

<base href="/">

2. Include router file:

import 'angular2/router';

3. Inject the provider:

bootstrap(App, [
ROUTER_PROVIDERS
]);

4. @RouterConfig:

@RouteConfig([
{path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
{path: '/about', name: 'About', component: AboutComponent}
])

5. Inject ROUTER_DIRECTIVES:

directives: [HomeComponent, AboutComponent, ROUTER_DIRECTIVES],

6. Define the link:

<a href="" [routerLink]="['Home']">Home</a>
<a href="" [routerLink]="['Home', {username: 'Hero'}]">Owner</a>
<a href="" [routerLink]="['About']">About</a>

7. Define the router-outlet:

<nav>
<a href="" [routerLink]="['Home']">Home</a>
<a href="" [routerLink]="['Home', {username: 'Zhentian Wan'}]">Owner</a>
<a href="" [routerLink]="['About']">About</a>
</nav>
<router-outlet></router-outlet>

8. If deal with RouterParams:

constructor(private _routeParams: RouteParams){
this.username = _routeParams.get('username');
}

----------------