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

2023年5月31日 250次阅读

现在,角度ui-router项目没有任何关于angular 1.5组件的明确说明.

我的项目要求是使用嵌套状态,我想使用角度1.5组件轻松迁移到角度2.

我正在寻找两者的最佳样板.

选项1,2&支持从以下链接4.我想知道嵌套状态和迁移到角度2的最佳选项是什么.

Angular 1.5 components with nested states

最佳答案 我刚和好友分享了这个解决方案.不确定它是否符合您的确切要求,但使用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

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>
点赞