Angular UI-Router 多个命名视图

Question

期望的行为

我正在使用 AngularJS 和 Angular UI-Router。

1. 我想允许两个子状态共享一个父状态。
2. 我希望子状态用自己的视图填充父状态视图中的ui-view。
3. 我希望两个子状态之一的视图中有三个 ui-view，每个都充满视图。

尝试绘制图表：

Parent: <ui-view>
        filled by
          Child:  <ui-view> <ui-view> <ui-view>
                    filled    filled   filled

我的情况的具体细节

我有一个名为category-details 的状态。在这个抽象状态的视图中，我有一个未命名的ui-view。在两个子状态之一 (category-details.selected) 我想使用 multiple named views。

当前的工作策略

这里是抽象状态。非常基本，但供您参考。

.state('category-details', {
    abstract: true,
    data: {
        pageTitle: 'Category Details'
    },
    templateUrl: "views/category-details.html",
})

在category-details.selected 状态下（将有多个命名视图的状态），我将category-details.html 的未命名ui-view 设置为category-details-selected.html：

.state('category-details.selected', {
    views: {
        '': {
            templateUrl: 'views/category-details-selected.html',
            controller: 'CategoryDetailsSelectedCtrl'
        }
    }
})

在category-details-selected.html 视图中，我有三个名为ui-views：

<div ui-view="firstNamedView"></div>
<div ui-view="secondNamedView"></div>
<div ui-view="thirdNamedView"></div>

最后，我定义了一个状态来设置这三个ui-view，以满足我想要的行为的第三部分：

.state('category-details.selected.aspect', {
    url:"/category-details/:selectedCategory",
    views: {
        'firstNamedView': {
            templateUrl: 'views/first-named-view.html',
            controller: 'FirstNamedViewCtrl'
        },
        'secondNamedView': {
            templateUrl: 'views/second-named-view.html',
            controller: 'SecondNamedViewCtrl'
        },
        'thirdNamedView': {
            templateUrl: 'views/third-named-view.html',
            controller: 'ThirdNamedViewCtrl'
        }
    }
});

为什么我的解决方案是尴尬和次优的

添加category-details.selected.aspect 状态来设置category-details-selected 视图的常量元素（三个ui-view）是不必要的。每次我想要多个命名视图时，它都会强制创建一个额外的状态。

我的尝试

我相信我应该能够将 category-details.selected.aspect 状态的 url 和视图移动到其父状态 (category-details.selected) 的 views 组件中。这看起来像：

.state('category-details.selected', {
    url:"/category-details/:selectedCategory",
    views: {
        '': {
            templateUrl: 'views/category-details-selected.html',
            controller: 'CategoryDetailsSelectedCtrl'
        },
        'firstNamedView': {
            templateUrl: 'views/first-named-view.html',
            controller: 'FirstNamedViewCtrl'
        },
        'secondNamedView': {
            templateUrl: 'views/second-named-view.html',
            controller: 'SecondNamedViewCtrl'
        },
        'thirdNamedView': {
            templateUrl: 'views/third-named-view.html',
            controller: 'ThirdNamedViewCtrl'
        }
    }
})

这导致未命名的ui-view 设置正确，但未填写三个命名的ui-view。

由于选择三个名为 ui-view 的问题是问题所在，因此我尝试使用 absolute selectors described here 来选择它们。这并没有解决问题。我试过了：

firstNamedView
firstNamedView@
firstNamedView@category-details.selected
(others of course)

结束语

我想象的是否可行，是另一种更好的方法，还是我目前的方法是最好的？归结为同时设置父ui-view 的子ui-views。我认为最后一句话单独太令人困惑，所以我将整个示例包括在内。

如果我可以提供更多说明，例如版本，请告诉我。谢谢。

Answer 1

抽象州需要自己的<ui-view/> 供其子代接入。

父状态category-details 是abstract 状态。子状态将需要一些参考 ui-view 来插入该状态。在你我相信视图/category-details.html 没有任何ui-view（正如你提到的category-details-selected.html 包含ui-view）。

试试这个：

.state('category-details', {
  abstract: true,
  data: {
    pageTitle: 'Category Details'
  },
  templateUrl: "views/category-details-selected.html",
})

.state('category-details.selected', {
  url:"/category-details/:selectedCategory",
  views: {       
    'firstNamedView': {
        templateUrl: 'views/first-named-view.html',
        controller: 'FirstNamedViewCtrl'
    },
    'secondNamedView': {
        templateUrl: 'views/second-named-view.html',
        controller: 'SecondNamedViewCtrl'
    },
    'thirdNamedView': {
        templateUrl: 'views/third-named-view.html',
        controller: 'ThirdNamedViewCtrl'
    }
  }
})

在这里，我们为抽象视图提供了一个模板，其中包含 ui-view，供子级填充。

查看ui-router: Abstract State 的文档了解更多信息。

---

编辑：我假设views/category-details.html 不包含任何ui-view。不过后来有人指出，views/views/category-details.html 确实有 ui-view

这对我有用：

category-details.html:

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

category-details-selected.html:

<div ui-view="firstNamedView"></div>
<div ui-view="secondNamedView"></div>
<div ui-view="thirdNamedView"></div>

路由器：

    .state('category-details', {
        abstract: true,
        data: {
            pageTitle: 'Category Details'
        },
        templateUrl: "../app/atest/category-details.html",
    })


    .state('category-details.selected', {
        url: "/atest",
        views: {
            '': {
                templateUrl: "../app/atest/category-details-selected.html",
                //   controller: 'approvalsCtrl as vm',
            },
            'firstNamedView@category-details.selected': {
                templateUrl: '../app/atest/first.html',
                //    controller: 'approvalsCtrl as vm',
            },
            'secondNamedView@category-details.selected': {
                templateUrl: '../app/atest/second.html',
                //   controller: 'approvalsCtrl as vm',
            },
            'thirdNamedView@category-details.selected': {
                templateUrl: '../app/atest/third.html',
                //   controller: 'approvalsCtrl as vm',
            }
        }
    })

我可以看到您提到您尝试使用 firstNamedView@category-details.selected，但它对您不起作用。上面的例子对我有用。检查您的category-details.html 和category-details-selected.html 视图是否包含正确的ui-view。