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

Question

我正在构建一个 webapp，其中包含一些出现在每个“页面”上的元素，以及一个内容根据导航到的“页面”而变化的区域。为了实现这一点，我正在使用具有多个命名视图和嵌套状态的 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 嵌套动态内容。在这种情况下，我正在尝试加载主页内容。

是否需要一些特殊符号来定位命名视图？

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/
• mydomain.com/login
• mydomain.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>'
    })