javascript - Angular 2 - 如何使用新的 Angular 2.0.0-rc.1 路由器

Question

我开始写一个新的 angular 2 项目，我发现我安装了 2 angular router:

1. "@angular/router": "2.0.0-rc.1",
2. "@angular/router-deprecated": "2.0.0-rc.1",

我没有在 Angular 网站上找到如何使用新路由器。比如我需要导入什么组件。

所以我的问题是:

1. 我应该使用router-deprecated吗？
2. 有没有关于如何使用新路由器的好文档？

Answer 1

这里是 Angular 2 Router (RC1) 的使用方法，与测试版(已弃用)相比:

• Routes 替换 RouteConfig 。

• 在您的配置中有一个新语法:

  {path: '/path', component: MyPathComponent}

  代替:

  {path:'/path', name: 'MyPath', component: MyPathComponent}

• 现在使用 routerLink 是这样的:

  <a [routerLink]="['/path/2']">Click to navigate</a>

  代替:

<a [routerLink]="['MyPath', 'Detail', {id:2}]">Shark Crisis</a>

• 也不再有 RouteParams，取而代之的是使用路由器生命周期钩子(Hook): CanActivate 、 OnActivate 和 CanDeactivate .

如果您在 ngOnInit 中使用了参数，您现在可以这样做:

routerOnActivate(curr: RouteSegment): void {
           curr.getParam('id');
       }

你最终会得到这样的东西:

import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";

@Injectable()
@Component({
    selector: "my-app",
    templateUrl: `<a [routerLink]="['/component1']">Click to go to component 1</a>`,
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
    {path: "/component1", component: Component1},
    {path: "/component2", component: Component2}
])
export class AppComponent {
    constructor(private _router: Router) {
        //If you want to use Router in your component (for navigation etc), you can inject it like this
    }
}

更新 (9/6/16):似乎 Angular 2 RC1 Router 像旧的一样被弃用了。新的建议是使用@angular/router 的 3.0.0-alpha.3 版本。

以下是 Angular 博客中的更多信息: http://angularjs.blogspot.co.il/2016/06/improvements-coming-for-routing-in.html

以下是新路由器的概述: http://victorsavkin.com/post/145672529346/angular-router

这是一个有效的 plunker: http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview