首页 > 其他 > 详细

[Angular 2] Router basic and Router Params

时间:2016-04-18 06:31:59      阅读:4229      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!