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

Question

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

现在，Angular2怎么样？我想听听你的意见，以便我能评估这两个机会。

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

Answer 1

一般信息

NGRX路线 r docs

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

Angular2路由器 docs

1. Angular团队的默认解决方案
2. 受到AngularJS的UI路由器的启发
3. 专为组件构建

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

NG2 UI-router docs

来自AngularJS的众所周知的UI路由器已针对Angular2进行了更新。从已知的优势 - 从AngularJS UI-router更新到ng2 UI-router更顺畅。

比较

让我们将两个版本的UI-router语法与Angular2 Router进行比较。

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路由器几乎是一样的。另外需要说它支持大多数常见功能，如通过路由的静态/动态数据共享，嵌套视图等。

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

结论

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