Question

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

Angular 1.5 components with nested states

Answer 1

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

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

e.g。 <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

<强> app.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'
    }
  }
});

用户-profile.html

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

用户简档-component.js
个人资料 - 编辑component.js

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

用户简档-component.html

<button type="button" ui-sref="app.profileEdit()">Edit Profile</button>

如何在ui-router状态下使用angular 1.5组件

1 个答案: