Angular Ui 路由器多个命名视图和嵌套状态 [英] Angular Ui router multiple named views and nested states

问题描述

当我在嵌套状态下使用多个命名视图时，我有一个关于 Angular UI 路由器的问题.基本上我有一个带有指向两个命名视图的模板的抽象状态.这两个命名视图在两个子状态中都有定义.我想将 URL 固定为/test.

I have a question about the Angular UI router when I am using multiple named views in nested states. Basically I have an abstract state with a template that points to two named views. Those two named views are defined in both the sub states. I want to keep the URL fixed to /test.

当转换到任一子状态时，我只看到与第一个子状态对应的视图.这是为什么?我真的希望有人能帮我澄清一下这个概念，这样我就可以学习

When transitioning to either of the sub states, I see the view corresponding to the first sub state only. Why is that? I really hope someone can clarify the concept for me so I can learn

JSFiddle 在这里:https://jsfiddle.net/adeopura/e2c5n14o/16/

JSFiddle is here: https://jsfiddle.net/adeopura/e2c5n14o/16/

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
function ($stateProvider, $routeProvider) {
    $stateProvider
        .state('test', {
            abstract: true,
            url: '/test',
            views: {
                'main': {
                     template:  '<h1>Hello!!!</h1>' +
                                '<div ui-view="view1"></div>' +
                                '<div ui-view="view2"></div>'
                }
            }
        })
        .state('test.subs1', {
            url: '',
            views: {
                'view1': {
                    template: "Im 1View1"
                },
                'view2': {
                    template: "Im 1View2"
                }
            }
        })
        .state('test.subs2', {
            url: '',
            views: {
                'view1': {
                    template: "Im 2View1"
                },
                'view2': {
                    template: "Im 2View2"
                }
            }
        });
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $state.transitionTo('test.subs1');//I see the data corresponding to the test.subs1
    // Assume here that there are lots of different state transitions in between unrelated to the test1 state
    $state.transitionTo('test.subs2');//I still see the data corresponding to the test.subs1, why is that?

}]);

推荐答案

我的一位同事解释了这种情况下发生的情况.解释如下:

One of my colleagues explained what is happening in this case. Explained as below:

1. state.transitionTo('test.subs2') 使应用程序进入状态 'test.subs2'
2. 一旦进入test.subs2"状态，URL 就会更改为/test
3. 这会导致 Angular UI 路由器触发对适当状态的更改.
4. 适当的状态是第一个与 URL/test 匹配的状态，即状态 'test.subs1'

希望这对某人有帮助

这篇关于Angular Ui 路由器多个命名视图和嵌套状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！