嵌套的角度ui路线

Question

您好，我正在尝试在已经嵌套的路由中创建嵌套路由。综合起来，我有一个门户，其中包含我的侧边栏和其他一些花哨的东西，我可以在那里导航到集群。从集群中，我应该能够选择一个集群并查看其详细信息。

我的“祖父母”路线称为“门户”，父路线称为“集群”。这是 clusters-route 的代码

(function () {
  'use strict';

  angular.module('ap.clusters.RouteConfig', ['blocks.router','ncy-angular-breadcrumb', 'ap.clusters.ClusterDetailsCtrl'])
    .run(onRun);

  /* @ngInject */
  function onRun(routerHelper) {
    routerHelper.configureStates(getStates());
  }

  function getStates() {
    return [
          {
          state: 'portal.clusters',
          config: {
            url: '/clusters',
            templateUrl: '/views/clusters/clusters.html',
            controller: 'clustersCtrl',
            controllerAs: 'vm',
            title: 'Clusters',
            ncyBreadcrumb: {
              label: 'Clusters'
            },
           settings: {
              nav: 4,
              content: '<i class="fa fa-cubes nav-icon"></i>a<span>Clusters</span>'
      }
    }
  }
];
}

})();

这是我试图包含的嵌套路由：

(function () {
   'use strict';

   angular.module('ap.clusters.clusterDetailsRouteConfig', ['blocks.router', 'ncy-angular-breadcrumb', 'ap.clusters.ClusterDetailsCtrl'])
     .run(onRun);

  /* @ngInject */
  function onRun(routerHelper) {
    routerHelper.configureStates(getStates());
  }

  function getStates() {
    return [
           {
           state: 'portal.clusters.cluster-details',
           config: {
              url: '/cluster/:id',
              templateUrl: '/views/clusters-details/clusters-details.html',
              controller: 'clusterDetailsCtrl',
              controllerAs: 'vm',
              title: 'Cluster',
              ncyBreadcrumb: {
                 label: '{{vm.cluster.name}}'
              }
            }
         }
     ];
   }

 })();

路由似乎工作正常，因为 url 显示 ....portal/clusters/cluster/0 或我选择的任何索引，但 html 未呈现。当我单击链接时，URL 会发生变化。这是我如何从集群视图调用路由（使用玉）

a(ui-sref="portal.clusters.cluster-details({id: $index})")

真的不知道有什么问题，为什么没有显示html

Answer 1

我最近继承了 anram 发布问题的这个项目。他描述的问题实际上是由于该站点的性质而引起的。该站点实际上有一些相当复杂的路由和面包屑需求（从开发的角度来看是复杂的，从可用性的角度来看是相当简单和严格的）。有关这方面的更多详细信息，以及我在同一个项目中遇到的面包屑生成问题，请阅读my question here。

在 anram 所询问的特定情况下，我们有一个带有横幅栏、侧边栏菜单、表格列表视图和详细视图的门户布局。每个列表视图都可以直接从侧边栏菜单导航到。详细视图都可以通过两种方式导航到，或者从通过侧边栏菜单可访问的列表视图，或者通过来自某个虚拟“父”详细视图的子列表视图。此虚拟层次结构中有许多不同的级别，因此到达最低叶级别的导航路径可能很短，也可能很长，具体取决于您的导航方式。

anram 遇到的问题是由于所有详细视图最初都被配置为 ui-router 中列表状态的子状态，而实际上并非如此。他们是字面意义上的兄弟姐妹。详细视图不是嵌入在列表视图某处的

中的子视图……它们是完全独立的视图。这样，名称 portal.clusters.cluster-detail 不正确。这意味着应该首先加载集群状态，然后将集群详细信息加载到该视图某处的 ui 视图中。集群视图中的任何地方都没有 ui-view，因此没有加载集群详细信息。通过 ui-router 的导航工作正常，并且按照描述工作......问题不在于 ui-router，问题在于没有第二级嵌套状态这一简单事实。

我最近重构了 ui-router 状态，使所有详细视图直接成为门户根视图的子视图，因此我们现在有了 portal.clusterDetails 而不是 portal.clusters.cluster-detail。这解决了一个问题，细节视图现在可以正确加载，我们可以从任何其他视图路由到它们（因为现在几乎每个视图都是同级的，并且都是门户的子级。）然而，这引发了另一个问题，关于面包屑生成（如果您有兴趣阅读上面的链接，请参阅上面的链接问题。）

Answer 2

我创建了working plunker here。

我会说，您的设置似乎没问题。唯一（隐藏在这里）的地方，可能是错误的

的内容

 templateUrl: '/views/clusters/clusters.html',

state: 'portal.clusters' 的内部。那里可能有什么问题？

这实际上是state: 'portal.clusters.cluster-details' 的父视图。这意味着，我们需要在此处插入一个锚点 (ui-view)：

...
<div ui-view=""></div>

这允许我们的孩子被渲染

在行动中检查它here