UI 路由器子视图是多个命名视图或未命名视图

Question

如何在ui路由器中配置父/子关系，其中兄弟姐妹在父页面中共存？我无法使子状态多个命名视图正常工作。

这是我的父页面：家长.html：

<div> I have two child pages: 
  child page1 detail: <ui-view /> and 
  child page2 detail:<ui-view />.  
  I need both pages
</div>

我不知道如何或是否应该使用多个命名视图，因为多个命名视图看起来是平行且可分离的，而不是像上面的代码那样被其他文本包裹。

我的 UI 路由器配置：

 $stateProvider
  .state('parent', {
    url: '/parent',
    templateUrl: 'parent.html'
  })
  .state('parent.children', {
    url: '/children',
    views: {
      'child1': {
        templateUrl: 'child1.html'
      },
      'child2': {
        templateUrl: 'child2.html'
      }
    }
  });

未命名的 ui-view 只允许插入一个子项。

请参阅中的代码普伦克

Answer 1

示例中的

<ui-view> s 不正确。它不是一个自闭合标记，当ui-view用作元素而不是属性指令时，您需要一个name属性才能使用命名视图。如果您更改父级.html则更改为以下内容，它应该可以工作。

<div> I have two child pages: 
  child page1 detail: <ui-view name="child1"></ui-view> and 
  child page2 detail:<ui-view name="child2"></ui-view>.  
  I need both pages
</div>