angularjs - 如何使用具有 ui-router 状态的 angular 1.5 组件

Question

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

Angular 1.5 components with nested states

Answer 1

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

如果你想让这些 View 动态化，比如基于用户 Angular 色，那么你可以使用 templateProvider功能。但是，使用 templateProvider 您不能使用组件来定义 View ，因此您可能只需要返回组件的标记。

例如<editAdminProfileForm></editAdminProfileForm>
有关使用 templateProvider 的条件 View 的更多信息，请参阅我的其他答案: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'
    }
  }
});

user-profile.html

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

用户配置文件组件.js
profile-edit-component.js

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

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

用户配置文件组件.html

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