47

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

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

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

4

1 回答 1

60

一般信息

NGRX 路由r 文档

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

Angular2 路由器 文档

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

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

NG2 UI-路由器 文档

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

  • 相同的位置策略（路径和哈希）
  • 类似的路由定义
  • 类似服务：
    • $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 团队的标准解决方案，这意味着更好的支持。

于 2016-10-08T08:10:13.853 回答