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

Question

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

那么现在,Angular2呢？我想听听你的意见,以便我能评估这两个机会.

此外,搜索和搜索谷歌我发现ngrx /路由器,我不知道.你能告诉我Angular2 的内置路由器,Angular2和ngrx路由器的新ui路由器之间有什么区别吗？

Answer 1

一般信息

NGRX Route r docs

ngrx路由器已弃用!有从ngrx路由器到标准Angular2路由器的迁移策略.

Angular2路由器 文档

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

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

NG2 UI-router 文档

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

• 相同的位置策略(路径和哈希)
• 类似的路线定义
• 类似服务:
  • $ 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团队的标准解决方案,这意味着更好的支持.