Question

我很难理解UI-Router抽象状态的工作原理。这就是事情：我有一个index.html，其<ui-view>内只有<body>个标记。

有两个主要状态：登陆和应用程序（/登陆和/ app）。

现在没有登陆状态的问题，因为它只是一个静态文件（没有子视图等）。

但是对于我的/ app状态，我需要一个覆盖整个应用程序的抽象父状态（需要为每个子状态解析用户配置文件）。

事情是这个抽象状态的孩子也有子视图。我无法进行渲染。

我的$ stateProvider配置（简化）：

//landing state, no problem here
.state('landing', {
    url: '/landing',
    templateUrl: 'landing.html'
})
// my abstract parent state, with the resolve
.state('root', {
    url: '',
    abstract: true,
    template: "<div ui-view></div>",
    resolve: {
        current_user: function (UserFactory) {
            return UserFactory.initCurrentUserProfile();
        }
    }
})

// the child which cannot render the view headerAndSearchbar
.state('root.app', {
    url: '/app',
    templateUrl: 'app.html',
    views: {
        'headerAndSearchbar': {
            templateUrl: './partials/header/headerAndSearchbar.html'
        }
    }
})

app.html：

<div ui-view="headerAndSearchbar">     
</div>
<div>
    This is app.html     
</div>

请注意，如果我在状态root.app中删除视图声明，我可以看到文字＆＃34;这是app.html＆＃34;。 headerAndSearchbar.html只包含简单的html＆amp; CSS

有什么想法吗？我抨击这个 - 我错过了什么？

Answer 1

有两个问题。

首先，在孩子'root.app'内部实际上有两个观点。

未命名（与templateUrl相关的那个＆＃39; app.html＆＃39;）
命名视图＆＃39; headerAndSearchbar＆＃39;

这意味着，大多数都在 views : {} 设置中声明：

.state('root.app', {
    url: '/app',
    //templateUrl: 'app.html',
    views: {
        '' : { templateUrl: 'app.html' },
        'headerAndSearchbar': { ... n
    }...

但这还不够。

其次，我们需要第二个（命名）的绝对命名，因为它与其父级无关，而与其自身无关：

.state('root.app', {
    url: '/app',
    //templateUrl: 'app.html',
    views: {
        '' : { templateUrl: 'app.html' },
        // this is the same as a path to parent view 'headerAndSearchbar@root'
        // 'headerAndSearchbar': { ...
        // this means ... search in this state, inside of app.html
        'headerAndSearchbar@root.app': { ... 
    }...

检查这些以获取更多详细信息：

UI-Router抽象状态子进程无法呈现

1 个答案: