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

Question

我已经开始编写一个新的角度2项目,我发现我安装了2个角度路由器:

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

我没有在角度网站上找到如何使用新路由器.例如,我需要导入哪个组件.

所以我的问题是:

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

Answer 1

以下是如何使用Angular 2路由器(RC1),与beta(已弃用)相比:

• 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了,而不是你使用路由器的生命周期挂钩的PARAMS: ,CanActivate,OnActivate和 CanDeactivate.

如果你在里面使用params 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路由器与旧版本一样被弃用.新建议是使用@ 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

这是一个工作的插件:http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07？p =preview

Answer 2

这有助于我开始使用新的路由器:https: //angular.io/docs/ts/latest/guide/router.html

编辑:以上链接现在是空的..缓存版本感谢tylerjgarland:https://web.archive.org/web/20160416143350/https://angular.io/docs/ts/latest/guide/router.html

我还发现了来自ng-conf的Misko Hevery的路由器说话有用:https://www.youtube.com/watch？v = d8yAdeshpcw

更新:似乎RC1路由器被放弃了？ https://github.com/angular/angular/issues/9088 也许这就是为什么文档消失而不是完成...

更新2: RC2路由器现已发布:https: //angular.io/docs/ts/latest/guide/router.html

组件路由器处于alpha版本.这是推荐的Angular 2路由器,取代了之前弃用的beta和v2路由器.

这行为package.json新的alpha路由器:

"@angular/router": "3.0.0-alpha.7",

正如我在这里发现的那样:安装Angular 2 RC2 w/new component router

Answer 3

这是您可以尝试的另一种资源(Angular RC.1):https://playcode.org/routing-in-angular-2-rc-1/

这是代码:https://github.com/jlsuarezs/RoutingExample

我建议您使用Angular-CLI创建新路由:https://github.com/angular/angular-cli

示例:https: //github.com/angular/angular-cli#generating-a-route

Answer 4

新的Angular 2路由器文档和开发工作正在进行中.直到你可以使用"@ angular/router-deprecated".

@AkhileshKumar建议很好,试试看,我认为它全部涵盖了基本的路由器使用情况.

Answer 5

RC.1 更新

Angular2 RC.1 的新路由器@angular/router已弃用。
Angular 团队正在努力再次提供新的路由器。
建议保留旧@angular/router-deprecated路由器，直到新路由器可用

原来的

新路由器的文档正在制作中。例如参见https://github.com/angular/angular.io/pull/1214

新路由器有一些问题，但总体来说已经运行良好。如果您不仅仅想了解如何使用它，我至少会等待下一个 Angular RC 版本。有一些早期采用者报告了一些问题，其中大多数可能很容易解决。