[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');
    }

 

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