Angular UI-Router和嵌套状态

Angular UI-Router and nested states

本文关键字：状态 嵌套 UI-Router Angular      更新时间：2023-09-26

我试图让我的嵌套状态工作，但我不知道我做错了什么。

这是我关于plunkr的简单例子

身体:

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

我想在这里显示我的site-container，它应该总是显示的:

<header class="main_header">
    <h1>My header</h1>
</header>
<main  ui-view></main>

在-标签中，我想在一些子状态之间切换，对于一个简单的例子，我只想显示:

<h2>My content</h2>

因此，我想要有:

<div class="site_container" ui-view>
    <header class="main_header">
        <h1>My header</h1>
    </header>
    <main  ui-view>
        <h2>My content</h2>
    </main>
</div>

下面是我的配置:

angular.module('myApp').config([
'$stateProvider',
'$urlRouterProvider',
function (
    $stateProvider,
    $urlRouterProvider
    ) {
    $stateProvider
    .state('main', {
        abstract: true,
        url: '/',
        templateUrl: 'app.html'
    })
    .state('main.child', {
        url: '/child',
        templateUrl: 'child.html',
    })
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/child');
}]);
你能告诉我，我做错了什么吗?

由于您的abstract状态在URL中有/，这意味着当您创建子状态时，它可以具有/child的URL将被视为//child

根据你当前的代码，它应该是$urlRouterProvider.otherwise('//child');

Plunkr

但是从技术上讲，为了使URL用户友好，你应该用blank ('') URL声明抽象状态

.state('main', {
    abstract: true,
    url: '', //<--changed to blank URL
    templateUrl: 'app.html'
})

然后你可以让你的代码工作，因为你张贴的问题

演示Plunkr

相关文章：