Question

我开始编写一个新的角度2项目，我发现我安装了2个角度路由器：

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

我在角网站上找不到如何使用新路由器。例如，我需要导入哪个组件。

所以我的问题是：

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

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。

如果你在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
    }
}

更新（2016年6月6日）： 似乎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路由器。

新的alpha路由器package.json中的这一行：

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

我在这里发现：Installing 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路由器文档和开发工作正在进行中。直到你可以使用＆＃34; @ angular / router-deprecated＆＃34;。

@AkhileshKumar建议很好，尝试一下我认为它全部涵盖了基本的路由器用法。

Answer 5

更新RC.1

不推荐使用Angular2 RC.1的新路由器@angular/router Angular团队正在努力再次提供新的路由器有人建议继续使用旧的@angular/router-deprecated路由器，直到新的新路由器可用

<强>原始

新路由器的文档正在进行中。请参阅示例 https://github.com/angular/angular.io/pull/1214

新路由器存在一些问题，但总体而言已经正常工作。如果您不想了解如何使用它，我至少会等待下一个Angular RC版本。有些早期采用者报告了一些可能很容易解决的问题。

Answer 6

使用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) {
  }
}

克隆此项目A basic Angular2 ("2.0.0-rc.1") project with authentication (login / logout) works as seed project使用 @ angular / router 即新路线

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

6 个答案: