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

问题描述

我有一个关于当我使用嵌套状态的多个命名视图的角度UI路由器的问题。基本上，我有一个指向两个命名视图的模板一个抽象的状态。这两个命名视图在两个子状态定义。我想保持网址固定/测试。

当转换到要么子状态的，我看到对应于只在第一子状态的图。这是为什么？我真的希望有人能澄清这一概念对我来说这样我就可以学习

的jsfiddle是在这里： https://jsfiddle.net/adeopura/e2c5n14o/16/

  angular.module（'对myApp'，['ui.state']）
的.config（['$ stateProvider'，'$ routeProvider'，
功能（$ stateProvider，$ routeProvider）{
    $ stateProvider
        .STATE（'测试'，{
            摘要：真实，
            网址：'/测试'，
            观点：{
                '主'：{
                     模板：'＆LT; H1＆GT;您好！＆LT; / H1＆GT;' +
                                '＆LT;格UI视图=厂景＆GT;＆LT; / DIV＆GT;' +
                                '＆LT;格UI视图=视图2＆GT;＆LT; / DIV＆GT;'
                }
            }
        }）
        .STATE（'test.subs1'，{
            网址：''，
            观点：{
                厂景：{
                    模板：我现在1View1
                }，
                视图2：{
                    模板：我现在1View2
                }
            }
        }）
        .STATE（'test.subs2'，{
            网址：''，
            观点：{
                厂景：{
                    模板：我现在2View1
                }，
                视图2：{
                    模板：我现在2View2
                }
            }
        }）;
}]）
.RUN（['$ rootScope'，'$州'，'$ stateParams'，函数（$ rootScope，$状态，$ stateParams）{
    $ rootScope $状态= $状态。
    $ rootScope $ stateParams = $ stateParams。
    $ state.transitionTo（'test.subs1'）; //我看到对应的test.subs1数据
    //这里假设有很多不同的状态转换之间无关的TEST1状态
    $ state.transitionTo（'test.subs2'）; //我仍然可以看到对应的test.subs1数据，这是为什么？}]）;
 

解决方案

我的一个同事解释了在这种情况下发生的。如下面所解释

1. state.transitionTo（'test.subs2'）会导致应用程序进入国家test.subs2


2. 一旦进入国家test.subs2，网址更改为/测试


3. 这将导致角UI路由器火更改相应的状态。


4. 适当的状态是，URL /测试，这将是状态相匹配的第一个'test.subs1

希望这可以帮助别人

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 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') causes the application to go to state 'test.subs2'
2. Once in state 'test.subs2', the URL is changed to /test
3. This causes the Angular UI Router to fire a change to the appropriate state.
4. The appropriate state is the first one that matches the URL /test, which would be the state 'test.subs1'

Hope this helps someone

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