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

Question

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

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

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

所以我的问题是：

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

Answer 1

RC.1 更新

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

原创

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

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

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",

我在这里发现：Installing Angular 2 RC2 w/ new component router

Answer 3

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 即新路由

Answer 4

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

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

Answer 5

下面是如何使用 Angular 2 路由器 (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了，取而代之的是你得到的参数使用 路由器生命周期挂钩：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
    }
}

更新（2016 年 9 月 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

这是一个工作中的 plunker： http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

Answer 6

这是您可以尝试的另一个资源（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