Angular 和 ui-router - 如何在父状态的命名视图中配置嵌套状态

Question

我正在开发一个 Web 应用程序，其中包含出现在每个 "page" 上的一些元素和一个内容根据 "page" 导航到的区域而变化的区域。为实现这一点，我使用 ui-router 具有多个命名视图和嵌套状态。当我尝试将状态嵌套在其父级的命名视图之一中时，我的问题就来了。我在想我没有正确定位父级中的命名视图，因为没有显示嵌套状态中的任何内容。

    $stateProvider
        .state('stc', {
            abstract: true,
            url: '/',
            views: {
                'shell': {
                     template: '<div ui-view="topbar"></div>' +
                               '<div ui-view="navbar"></div>' +
                               '<div ui-view="content"></div>'
                }
            }
        })
        .state('stc.sections', {
            url: '',
            views: {
                'topbar@stc': {
                    template: "<p>top bar</p>"
                },
                'navbar@stc': {
                    template: "<p>nav bar</p>"
                },
                'content@stc': {
                    template: '<div ui-view></div>'
                }
            }
        })
        .state('stc.sections.homepage', {
            url: '/',
            template: '<h1>Nested Home Page Content</h1>'
        });

我不知道如何定位父级的命名视图：content@stc 以便我可以基于 url 嵌套动态内容。在这种情况下，我正在尝试加载主页内容。

是否有一些特殊的符号 required 来定位命名视图？

Answer 1

我最终从 stc.sections 配置中删除了行：url: ''，并在 `state.sections.homepage 配置中将 url: '/' 替换为 url: ''。我现在可以使用类似以下内容为同级页面添加路由：

        .state('stc.sections.login', {
            url: 'login',
            controller: 'main.common.login as loginCtrl',
            template: require('./views/login.html')
        })

并在浏览器中使用

等 URL 访问它们

mydomain.com/
我的域名。com/login
我的域名。com/signup
等等

修改代码

$stateProvider
    .state('stc', {
        abstract: true,
        url: '/',
        views: {
            'shell': {
                 template: '<div ui-view="topbar"></div>' +
                           '<div ui-view="navbar"></div>' +
                           '<div ui-view="content"></div>'
            }
        }
    })
    .state('stc.sections', {
        views: {
            'topbar@stc': {
                template: "<p>top bar</p>"
            },
            'navbar@stc': {
                template: "<p>nav bar</p>"
            },
            'content@stc': {
                template: '<div ui-view></div>'
            }
        }
    })
    .state('stc.sections.homepage', {
        url: '',
        template: '<h1>Nested Home Page Content</h1>'
    })
    .state('stc.sections.login', {
        url: 'login',
        template: '<h1>Login Here</h1>'
    })

Angular 和 ui-router - 如何在父状态的命名视图中配置嵌套状态

Angular and ui-router - How to configure nested state within named view in parent state

angularjs

view

nested

angular-ui-router

states