如何将 angular 1.5 组件与 ui-路由器状态一起使用

Question

现在，angular ui-router 项目没有任何关于 angular 1.5 组件的明确内容。我的项目要求 uirement 是使用嵌套状态，我想使用 angular 1.5 组件轻松迁移到 angular 2。我正在寻找两者的最佳样板。支持以下 link 中的选项 1、2 和 4。我想知道嵌套状态和迁移到 angular 2.

的最佳选择是什么

Angular 1.5 components with nested states

Answer 1

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

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

例如<editAdminProfileForm></editAdminProfileForm>

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

这里有一些关于 UI-Router with components 的补充阅读：
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>

如何将 angular 1.5 组件与 ui-路由器状态一起使用

How to use angular 1.5 components with ui-router states

angularjs

angular-ui-router

angularjs-components

angularjs-1.5