4

现在，angular ui-router 项目没有任何关于 angular 1.5 组件的明确说明。我的项目要求是使用嵌套状态，并且我想使用 angular 1.5 组件轻松迁移到 angular 2。我正在寻找两者的最佳样板。支持以下链接中的选项 1,2 和 4。我想知道嵌套状态和迁移到角度 2 的最佳选择是什么。

具有嵌套状态的 Angular 1.5 组件

4

1 回答 1

3

我刚刚和朋友分享了这个解决方案。不确定它是否符合您的确切要求，但使用 UI-Router 1.0.0 您可以直接路由到组件。为了更进一步，使用嵌套状态，我们可以在命名视图上指定特定组件。然后，我们使用 链接到标记中的子状态ui-sref。当此状态变为活动状态时，其视图的组件也会激活。

如果你想让这些视图动态化，比如基于用户角色，那么你可以使用一个templateProvider函数。但是，使用 templateProvider 您不能使用组件来定义视图，因此您可能只需要返回组件的标签。

例如<editAdminProfileForm></editAdminProfileForm>

有关使用 templateProvider 的条件视图的更多信息，请参见我的其他答案：Angularjs ui-router : conditional nested name views

这里有一些关于 UI-Router 组件的额外阅读：
https ://ui-router.github.io/guide/ng1/route-to-component
https://ui-router.github.io/docs/latest/interfaces /ng1.ng1statedeclaration.html#component

应用程序.js

...

.state('app', {
  abstract: true,
  templateUrl: 'templates/user-profile.html',
})

.state('app.profile', {
  url: '/profile',
  views: {
    'profile': {
      component: 'userProfile'
    }
  }

})

.state('app.profileEdit', {
  views: {
    'editProfile': {
      component: 'editProfileForm'
    }
  }
});

用户配置文件.html

<ui-view>
  <div ui-view="profile"></div>
  <div ui-view="editProfile"></div>
</ui-view>

用户配置文件组件
.js 配置文件编辑组件.js

yourApp.component('userProfile', { ... });

yourApp.component('editProfileForm', { ... });

用户配置文件component.html

<button type="button" ui-sref="app.profileEdit()">Edit Profile</button>
于 2016-12-20T19:23:09.540 回答