Question

我正在使用ui-router进行路由，并且有一个嵌套视图，可以为所选项目加载一些菜单选项。我的问题是，是否可以在嵌套视图中使用ui-router？

创建嵌套视图

此处的代码有效：

.state('settings', {
    url: '/settings',
    views: {
        '': {
            templateUrl: './templates/settings.html',
            controller: 'settingsCtrl'
        },
        'details@settings': {
           templateUrl: './templates/details.html',
           controller: 'detailCtrl' 
        }
    }
})

但是我想加载一些附加到详细信息@ settings视图的内容。我该怎么办呢？我试过了

.state('settings', {
    url: '/settings',
    views: {
        '': {
            templateUrl: './templates/main/settings.html',
            controller: 'settingsCtrl'
        },
        'detail@settings': {
            url: '',
            views: {
                '': {
                    templateUrl: './templates/detail.html',
                    controller: 'detailCtrl'                            
                },
                'contact@detail@settings': {
                    templateUrl: './templates/contactpref.html'
                }
            }
        }
    }
})

我在控制台上没有遇到任何错误，但它确实破坏了我原来的嵌套视图。根据我的发现，如果这是可能的话，那些文档并不是很清楚。

Answer 1

这是不可能的。检查：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state。$ stateProvider

和 views 部分：

可选 map<string, object> ，可定义多个视图，或手动/明确定位视图。

示例：

在父状态模板
中定位三个命名的ui-views

views: {
  header: {
    controller: "headerCtrl",
    templateUrl: "header.html"
  }, body: {
    controller: "bodyCtrl",
    templateUrl: "body.html"
  }, footer: {
    controller: "footCtrl",
    templateUrl: "footer.html"
  }
}

就是这样。这就是UI-Router将为我们看到和解决的问题。为什么不提供任何错误？

因为map<string, object>的期望值为 object 。对已知属性（controller，templateUrl） - 进行迭代，忽略任何未知，未使用，未找到...已跳过 < / p>

解决方案：

经过UI-Router的一些经验后，我建议：

如果有一些相关的功能 - 将它们置于状态
如果有更多相关功能，但仅限于某些条件 - 将它们置于子状态。

该结构将带来许多好处，主要是：稳定的父级（不总是重新加载）和动态子级 - 每当参数更改时，将新内容放入某些目标/锚点/ ui-views中。检查：

Trying to have one subview call another subview using ui-router

在ui-router中，是否可以在嵌套视图中嵌套视图？

1 个答案: