ui-router 为什么父状态必须是抽象的

本文介绍了ui-router 为什么父状态必须是抽象的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

为什么父视图必须是抽象的才能呈现子视图(嵌套视图)?

$stateProvider.state('A', {url: '/A', abstract: true, templateUrl: 'views/A.html'}).state('A.B', {url: '', abstract: true, templateUrl: 'views/B.html'}).state('A.B.C', {url:'', abstract:false, templateUrl:'views/C.html'});

父视图A"托管在 home.html 中，如下所示:

<html xmlns="http://www.w3.org/1999/xhtml"><头><title>Yomingo</title><link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"/><link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/><身体>
<script type="text/javascript" data-main="scripts/main" src="lib/require/require.js"></script></html>

如果任何父状态 'A' 或 'B' 被标记为 abstract=false，则不会呈现 ui-view 内容.

解决方案

我也遇到过类似的问题.

您的三个州都使用相同的 URL，/A:

A:'/A'
A.B:'/A' + ''
A.B.C:'/A' + '' + ''

由于它们定义了 URL，因此将根据您当前的 URL 选择当前状态.一次只能处于一种状态，因此大概选择的状态是第一个定义的状态.

如果您将 A 和 A.B 状态抽象化，则它们无法转换为，因此在您浏览到/A 时不会被考虑.因此选择了 A.B.C，继承自 A.B 和 A.

如果您希望一次展示更多的观点，那么我建议您阅读多个命名视图以便于跟踪.

Why parent views have to be abstract in order to have child views (nested views) rendered?

$stateProvider
            .state('A', {url: '/A', abstract: true, templateUrl: 'views/A.html'})
            .state('A.B', {url: '', abstract: true, templateUrl: 'views/B.html'})
            .state('A.B.C', {url:'', abstract:false, templateUrl:'views/C.html'});

The parent view 'A' is hosted in home.html as follow:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Yomingo</title>
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
</head>
<body>
    <div ui-view>
    </div>
<script type="text/javascript" data-main="scripts/main" src="lib/require/require.js"></script>
</body>
</html>

If any of the parent states 'A' or 'B' is marked as abstract=false the ui-view content is not rendered.

解决方案

I've been having similar trouble.

Your three states are all using the same URL, /A:

A: '/A'
A.B: '/A' + ''
A.B.C: '/A' + '' + ''

As they have URLs defined, the current state will be chosen based on your current URL. You can only be in one state at a time, so presumably the state that is chosen is the one defined first.

If you make the A and A.B states abstract then they cannot be transitioned into and so will not be considered when you browse to /A. Thus A.B.C is chosen, inheriting from A.B and A.

If you are looking to show more that one of your views at a time then I would recommend reading the docs for multiple named views to make it easier to keep track of.

这篇关于ui-router 为什么父状态必须是抽象的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！