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

Posted 2023-02-22

【中文标题】Angular 2 - 如何使用新的 Angular 2.0.0-rc.1 路由器

【英文标题】：Angular 2 - how to use the new angular 2.0.0-rc.1 router

【发布时间】：2016-09-02 13:08:04

【问题描述】：

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

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

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

所以我的问题是：

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

【问题讨论】：

github.com/app4pc/angular2-bible.git 现在有了新路线

请注意，正如下一篇文章的 cmets 中所述，这个“新”RC.1 路由器已经被弃用并再次被重写。 （不过我会对此声明的来源感兴趣）playcode.org/routing-in-angular-2-rc-1

@netmikey 有一个声明 here 指向 this repo。我找不到导致此问题的讨论。

终于有官方解释了：angularjs.blogspot.com/2016/06/…

【参考方案1】：

RC.1 更新

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

原创

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

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

【参考方案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

【讨论】：

“本章正在进行中”。我猜文档在某些时候会有所帮助，但不是现在。

@Steve，感谢您的确认。我清楚地记得几周前使用过这个页面。这是一个缓存视图。 web.archive.org/web/20160416143350/https://angular.io/docs/ts/…

【参考方案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 即新路由

【讨论】：

使用 @angular/router-deprecated 不是新的 Angular2 RC.1 路由器。

他问的是如何使用新路由器，而不是旧路由器。

【参考方案4】：

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

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

【参考方案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

【讨论】：

它也被弃用了，这里是最新的升级指南：medium.com/@blacksonic86/…

Witch 版本的 Angular 路由器，上面的帖子正在与之交谈？ RC1 为 2.0.0 还是 RC1 为 3.0.0 ？

版本为2.0.0

【参考方案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