角UI路由器解析父状态 [英] angular ui-router resolve for parent state

问题描述

在我父母的状态我有一个决心。目前，我不注入任何子状态的决心的关键。

我认为我的孩子的状态不会等待这个决心/承诺得到解决。但是，当我设置一个超时，我可以看到我的孩子状态不等待。

这是正确的行为？

 的.config（函数（$ stateProvider，$ urlRouterProvider，州）{
    $ stateProvider
        .STATE（STATES.ROOT，{
            摘要：真实，
            模板：'＆LT;格UI视图=＆GT;＆LT; / DIV＆GT;，
            解析：{
                UserService：UserService，
               为userDetails：功能（UserService）{
                   返回UserService.getUserProfile（）;
                }            }
        }）
        .STATE（STATES.BILLING，{
            网址：'/bill/checkClientContext.html'，
           templateUrl：比尔/ checkClientContext.html'，
            控制器：'BillingController
        }）
 

UserService.js

 使用严格的;
angular.module（'nabc.data'）
    。服务（'UserService'，['AjaxService'，'$超时'，'$ Q'，函数（AjaxService，$超时，$ Q）{
        VAR getUserProfile =功能（）{
            VAR承诺= AjaxService.get（'USERPROFILE'）;            变种推迟= $ q.defer（）;
            $超时（功能（响应）{
                deferred.resolve（响应）;
            }，5000）;
            返回deferred.promise;
        };        返回{
            getUserProfile：getUserProfile
        };
    }]）;
 

正如你可以看到上面的 BillingController 在为userDetails 不注。但是当我将UserService设置一个超时，我看到我的帐单状态不等待。

解决方案

1. 父控制器总是加载子控制器之前（如果不是因为一些邻近子状态之前加载）。


2. 控制器需要等待其决心一节。

下面是一个简单的例子，假设我们有父状态的 P 与决心段和两个子状态 C1 和 C2 。

第一种情况 - 从单独的状态导航到 P.C1 状态，或只是在浏览器中点击相应的URL。该命令将以下内容：

• 父的决心区执行


• 家长控制装


• 孩子的控制器中加载

第二种情况 - 从 P.C1 在这种情况下的 P 别导航到 P.C2 吨需要加载，所以只有 C2 控制器被加载。

In my parent state I have a resolve. Currently, I do not inject the resolve key in any child state.

I assumed that my child state would not wait for this resolve/promise to be resolved. But when I set a timeout, I can see my child state does wait.

Is this correct behaviour?

.config(function ($stateProvider, $urlRouterProvider, STATES) {
    $stateProvider
        .state(STATES.ROOT, {
            abstract: true,
            template:'<div ui-view=""></div>',
            resolve: {                  
                UserService: 'UserService',
               userDetails: function(UserService){
                   return UserService.getUserProfile();
                }

            }
        })
        .state(STATES.BILLING, {
            url: '/bill/checkClientContext.html',
           templateUrl: 'bill/checkClientContext.html',
            controller: 'BillingController'
        })

UserService.js

'use strict';
angular.module('nabc.data')
    .service('UserService', ['AjaxService', '$timeout','$q', function(AjaxService, $timeout, $q) {
        var getUserProfile = function() {
            var promise = AjaxService.get('userProfile');

            var deferred = $q.defer();
            $timeout(function(response){
                deferred.resolve(response);
            }, 5000);
            return deferred.promise;


        };

        return {
            getUserProfile: getUserProfile
        };
    }]);

As you can see above the BillingController does not inject in userDetails. But when i set a timeout in the userService, i see that my billing state does wait.

解决方案

1. Parent controller always loaded (if not loaded before for some adjacent child state) before child controller.
2. Controller need to wait for its resolve section.

Here is a short example, let's say we have parent state P with resolve section and two child states C1 and C2.

First case - you navigate to P.C1 state from separate state or just hit the corresponding URL in the browser. The order will be following:

• Parent's resolve section executed
• Parent's controller loaded
• Child's controller loaded

Second case - you navigate from P.C1 to P.C2 in this case P don't need to be loaded, so only C2 controller is loaded.

这篇关于角UI路由器解析父状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！