Angular 2 – 如何使用新的angular度2.0.0-rc.1路由器
我开始写一个新的angular度2项目，我发现我安装了2个angular度路由器：
-
"@angular/router": "2.0.0-rc.1"， -
"@angular/router-deprecated": "2.0.0-rc.1"，
我没有在angular度网站find如何使用新的路由器。 例如，我需要导入哪个组件。
所以我的问题是：
- 我应该使用
router-deprecated？ - 有没有什么好的文件如何使用新的路由器？
以下是如何使用Angular 2路由器（RC1），相比，testing版（不赞成）：
-
RoutesreplaceRouteConfig。 -
在你的configuration里面有一个新的语法：
{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，而是使用路由器生命周期钩子获取参数：CanActivate，OnActivate和CanDeactivate。
如果你在ngOnInit使用了params，你现在可以这样做：
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路由器像旧的一样被弃用。 新的build议是使用@ 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
这帮助我开始使用新的路由器： https ： //angular.io/docs/ts/latest/guide/router.html
编辑：上面的链接是空的现在..caching版本感谢tylerjgarland： https ：//web.archive.org/web/20160416143350/https://angular.io/docs/ts/latest/guide/router.html
我也发现米斯科Hevery的路由器谈话从ng-conf有帮助： 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瓦特/新组件路由器
这里是另一个可以尝试的资源（Angular RC.1）： https ：//playcode.org/routing-in-angular-2-rc-1/
这里是代码： https ： //github.com/jlsuarezs/RoutingExample
我build议你使用Angular-CLI创build新的路由： https ： //github.com/angular/angular-cli
例如： https ： //github.com/angular/angular-cli#generating-a-route
新的Angular 2路由器文档和开发工作正在进行中。 直到你可以使用“@ angular / router-deprecated”。
@AkhileshKumarbuild议是好的，试试看，我认为它涵盖了基本的路由器使用。
RC.1更新
Angular2 RC.1的新路由器@angular/router已被弃用。
Angular团队正在努力再次提供一个新的路由器。
build议留在旧的@angular/router-deprecated路由器，直到这个新的新路由器变得可用
原版的
新路由器的文档正在进行中。 请参阅https://github.com/angular/angular.io/pull/1214
新的路由器有一些问题，但总体来说已经工作得很好。 如果你不只是想了解如何使用它，我会至less等待下一个Angular RC版本。 有一些早期的采用者报告了一些问题，其中大多数可能很容易解决。
为angular2工作嵌套的路由代码：“@ angular / router”：“2.0.0-rc.1”即新路由器如下：
父母路线：
import {Component} from '@angular/core'; import {Router,Routes,ROUTER_DIRECTIVES} from '@angular/router'; import {Login} from '../login/login'; import {Dashboard} from '../dashboard/dashboard'; import {Admin} from '../admin/admin'; let template = require('./app.html'); @Component({ selector: 'auth-app', template: template, directives: [ROUTER_DIRECTIVES], }) @Routes([ {path: '/login', component: Login}, {path: '/dashboard', component: Dashboard}, {path: '/admin', component: Admin } ]) export class App{ constructor(public router: Router) { } }
儿童路线
import { Component} from '@angular/core'; import { CORE_DIRECTIVES } from '@angular/common'; import { Router, ROUTER_DIRECTIVES ,Routes} from '@angular/router'; import {AddUsrCat} from './addUsrCat/addUsrCat'; import {AllUsr} from './allUsr/allUsr'; declare var jQuery:JQueryStatic; let template = require('./admin.html'); @Component({ selector: 'admin', directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES], template: template }) @Routes([ {path: '/addUsrCat', component: AddUsrCat}, {path: '/allUsr', component: AllUsr}, {path: '*', component: AddUsrCat}, ]) export class Admin { constructor(public router: Router, public http: Http) { } }
克隆这个项目一个基本的Angular2（“2.0.0-rc.1”）项目与身份validation（login/注销）作为种子项目使用@angular/路由器即新路线
