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

Question

使用 ui-router-ng2 而不是新的 Angular2 路由器有什么好处和坏处？过去我使用 ui-router 和 Angular 1.x 而不是使用 ngRoute，因为我需要更好地支持嵌套 states/routes.

那么现在，Angular2 呢？我想听听您的意见，以便我评估这两个机会。

此外，在 Google 上搜索和搜索我发现 ngrx/router，我不知道。 你能告诉我 Angular2 的 builtin router 和新的 ui-router 之间有什么区别吗 Angular2 和 ngrx 路由器?

Answer 1

一般信息

NGRX 路线r docs

ngrx 路由器已弃用！从 ngrx 路由器到标准 Angular2 路由器有 migration strategy。

Angular2 路由器 docs

1. Angular 团队的默认解决方案
2. 灵感来自 UI-router from AngularJS
3. Built 组件

Angular2 路由器具有几乎所有 UI-路由器功能。

NG2 UI-路由器 docs

来自 AngularJS 的著名 UI-路由器已更新为 Angular2。从已知的优点 - 使从 AngularJS UI-router 到 ng2 UI-router.

的更新更顺畅

比较

让我们比较一下 UI-router 两个版本与 Angular2 Router.

的语法

AngularJS UI-路由器 :

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

Angular2 UI-路由器 :

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 是差不多的。另外需要说明的是，它支持大多数常见功能，例如 static/dynamic 通过路由、嵌套视图等共享数据

• 相同的定位策略（路径和哈希）
• 相似的路线定义
• 类似服务：
  • $state.go 和 Router.navigate
  • $stateParams 和 RouteParams
  • $state.current.data 和 RouteData
• 类似指令
  • ui-视图和路由器插座
  • ui-sref 和 routerLink

结论

Angular2 路由器充分利用了 UI-路由器的经验并加以实施。如果您需要使用 AngularJS UI-router 轻松地将代码库快速顺利地迁移到 Angular2，您可以尝试 Ng2 UI-router，否则，我认为 Angular2 路由器最合适。即使您决定使用 NG2 UI-router，检查所有优缺点，目前我觉得社区将从 Angular 团队中选择一个标准解决方案，这意味着更好的支持。