码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular 2] Router basic and Router Params

时间:2016-04-18 06:32:49      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

  • 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‘);
    }

 

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

 

 

[Angular 2] Router basic and Router Params

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5403042.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!