Question

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

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

(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不呈现。当我点击链接时，只是网址发生了变化。以下是我如何从群集视图调用路由（使用jade）

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

不知道它有什么问题，为什么不显示html

Answer 1

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

在anram询问的特定情况下，我们有一个门户布局，其中包含横幅栏，侧边栏菜单，表格列表视图和详细视图。可以直接从侧边栏菜单导航每个列表视图。详细视图可以通过两种方式导航到，可以通过侧栏菜单访问列表视图，也可以通过某些虚拟“父”详细视图中的子列表视图导航。此虚拟层次结构中有许多不同的级别，因此根据您的导航方式，导致最低叶级别的导航路径可能非常短或很长。

anram遇到的问题是由于所有细节视图最初被配置为ui-router中列表状态的子状态，而实际上它们不是。他们是字面意义上的兄弟姐妹。细节视图不是嵌入在＆lt; div ui-view /＆gt;中的子视图。在列表视图的某个地方......它们完全是独立的视图。这样，名称portal.clusters.cluster-detail不正确。这意味着应首先加载集群状态，并将该集群细节加载到该视图中某处的ui-view中。群集视图中的任何位置都没有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

角度ui路线嵌套

2 个答案: