使用 ui-router-ng2 相对于新的 Angular2 路由器有哪些优缺点?过去我在 Angular 1.x 中使用 ui-router 而不是使用 ngRoute,因为我需要更好的嵌套状态/路由支持。
那么现在,Angular2 呢?我希望听听你的意见,这样我就可以评估两种机会。
此外,在谷歌上搜索了很久,我发现了 ngrx/router,这是我之前不知道的。 你能告诉我 Angular2 的内置路由器、新的 ui-router 和 ngrx 路由器之间的区别吗?
使用 ui-router-ng2 相对于新的 Angular2 路由器有哪些优缺点?过去我在 Angular 1.x 中使用 ui-router 而不是使用 ngRoute,因为我需要更好的嵌套状态/路由支持。
那么现在,Angular2 呢?我希望听听你的意见,这样我就可以评估两种机会。
此外,在谷歌上搜索了很久,我发现了 ngrx/router,这是我之前不知道的。 你能告诉我 Angular2 的内置路由器、新的 ui-router 和 ngrx 路由器之间的区别吗?
NGRX路由器 文档
ngrx 路由器已经被弃用!从 ngrx 路由器迁移至标准的 Angular2 路由器存在迁移策略。
Angular2 路由器 文档
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基本相同。需要补充的是,它支持大多数常见功能,如通过路由进行静态/动态数据共享、嵌套视图等。
Angular2 Router吸取了UI-router的优秀经验并加以实现。如果您想快速顺畅地将代码库从AngularJS UI-router迁移到Angular2,则可以尝试Ng2 UI-router,否则,我认为Angular2 Router最适合。即使您决定使用NG2 UI-router,请仔细考虑所有利弊得失,当前情况下,我觉得社区将选择Angular团队提供的标准解决方案,这意味着更好的支持。
foo.com/my-route(outletA:componentA//outletB:componentB)
)。 - Benjamin