Angular2路由器 VS ui-router-ng2 VS ngrx路由器

Question

使用 ui-router-ng2 相对于新的 Angular2 路由器有哪些优缺点？过去我在 Angular 1.x 中使用 ui-router 而不是使用 ngRoute，因为我需要更好的嵌套状态/路由支持。

那么现在，Angular2 呢？我希望听听你的意见，这样我就可以评估两种机会。

此外，在谷歌上搜索了很久，我发现了 ngrx/router，这是我之前不知道的。 你能告诉我 Angular2 的内置路由器、新的 ui-router 和 ngrx 路由器之间的区别吗？

- smartmouse

---

ngrx/router 已经被弃用，不再适用于 Angular 2。详情请见 https://github.com/ngrx/router。 - Paul Swetz

Answer 1

通用信息

NGRX路由器 文档

ngrx 路由器已经被弃用！从 ngrx 路由器迁移至标准的 Angular2 路由器存在迁移策略。

Angular2 路由器 文档

1. 来自 Angular 团队的默认解决方案
2. 受到了 AngularJS 的 UI-router 的启发
3. 为组件构建而设计

Angular2 路由器几乎具备所有 UI-router 的特性。

NG2 UI-router 文档

著名的 AngularJS UI-router 已更新为 Angular2 版本。其已知优点之一是可以使得从 AngularJS UI-router 到 ng2 UI-router 的过渡更加平滑。

比较

让我们比较 UI-router 两个版本的语法和 Angular2 路由器。

AngularJS UI-router :

app.config(function($stateProvider){
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
    })
});

Angular2 UI-router :

export let state1: Ng2StateDeclaration = {
    name: 'home',
    component: HomeComponent,
    url: '/home'
}

@NgModule({
 imports: [
   SharedModule,
   UIRouterModule.forChild({ states: [home] })
 ],
declarations: [HomeComponent]
})
export class MyModule {}

Angular2 路由：

(更新：属性 - name在V3-alpha7之后已被移除，因为它与路由的懒加载不兼容。)

import {
    RouteConfig,
    Route
} from 'angular2/router';
import {HomeComponent} from './components/home';

@Component({})
@RouteConfig([
    new Route({ 
        path: '/home', 
        component: HomeComponent, 
        name: 'Home' // Deprecated property, works until v3-alpha7
    })
])
export class App {...}

我们可以看到，总的来说，Angular2 Router基本相同。需要补充的是，它支持大多数常见功能，如通过路由进行静态/动态数据共享、嵌套视图等。

• 相同的位置策略（路径和哈希）
• 类似的路由定义
• 类似的服务：
  • $state.go和Router.navigate
  • $stateParams和RouteParams
  • $state.current.data和RouteData
• 类似的指令
  • ui-view和router-outlet
  • ui-sref和routerLink

结论

Angular2 Router吸取了UI-router的优秀经验并加以实现。如果您想快速顺畅地将代码库从AngularJS UI-router迁移到Angular2，则可以尝试Ng2 UI-router，否则，我认为Angular2 Router最适合。即使您决定使用NG2 UI-router，请仔细考虑所有利弊得失，当前情况下，我觉得社区将选择Angular团队提供的标准解决方案，这意味着更好的支持。

- Mikki Kobvel

---

有几个Angular 1.x应用程序，包括一个带有组件的1.5.x应用程序，可能有一个令人信服的理由坚持使用ui-router，因为它正在为NG1与组件完成组件路由支持。 Angular团队似乎已经接近放弃将NG2路由器移植到NG1应用程序的计划。此外，UI-Router文档刚刚进行了翻新，并且似乎比我上次查看它们时有了很大的改进。 - Jasman

我们尝试过两种路由器，基于状态的 Angular 2 UI-Router 是我们远远的首选，就像我们构建 Angular 1 应用程序时一样。它的支持非常优秀。强烈推荐它而不是 Angular 2 原生路由器。 - demisx

在我个人和我的团队看来，我不会说Angular 2的路由器和UI Router几乎相同。当然，Angular 2试图从UI Router中复制一些功能，但在我看来，UI Router基于状态的用户界面是相对于基于URL路径的Angular 2路由器的最大优势之一。此外，那些来自AngularJS世界的人将会在将他们现有的应用程序迁移到Angular 2/4或开发新应用程序时获得更好的体验，因为UI-router在Angular 1世界中几乎是事实上的路由器。 - demisx

如果你需要命名的路由出口和一个正常的 URL，那么看一下 UI Router。目前默认路由中的命名出口具有非常糟糕的 URL。（例如 foo.com/my-route(outletA:componentA//outletB:componentB)）。 - Benjamin

似乎 ui-router 支持但 Angular 默认路由不支持的一个特性是类型化参数；据我所知，默认路由参数总是字符串。 - gschuager