angular ui-router 每个路由多个视图

Question

在我的应用程序中，我有主要内容区域和屏幕外导航。主屏幕视图通过 angular 中的 ui-view 指令填充。我希望我的屏幕外导航也通过 ui-view 指令填充。我不希望这是一个嵌套视图，我希望这个视图显示与根视图不同但基于相同路径的内容。像这样：

<body>
    <ui-view="root"></ui-view> <!-- Main page view is here -->
    <div id="OffscreenMenu">
        <ui-view="menu"></ui-view> <!-- This content will change each time the url changes -->
    </div>
</body>

那么我想要的是不定义多个状态，而是拥有一个状态，该状态将为每个视图显示两个不同的模板。

我找不到任何可行的方法。我搜索了文档，但我只能找到有关嵌套视图的信息。提前致谢。

Answer 1

您可以执行以下操作：

$stateProvider.state('state', {
    views: {
        'root@': { /* controller, templateUrl */ },
        'menu@': { /* controller, templateUrl */ }
    }
});

您也可以使用父级属性:

$stateProvider
    .state('topState', {
        views: {
            'menu@': { /* controller, templateUrl */ }
        }
    })
    .state('state1', {
        parent: 'topState',
        views: {
            'root@': { /* controller, templateUrl */ }
        }
    })
    .state('state2', {
        parent: 'topState',
        views: {
            'root@': { /* controller, templateUrl */ }
        }
    });

Answer 2

我会将其设置为具有两个子视图的绝对根视图。

.state('app', {
    abstract: true,
    url: '/',
    ...
 })
.state('app.root', {
    ...
 })
.state('app.menu', {
    ...
 })

angular ui-router 每个路由多个视图

angular ui-router multiple views per route

angularjs

angular-ui-router