角度 ui-route 状态父级和解析(嵌套解析) [英] angular ui-route state parent and resolve (nested resolves)

问题描述

我有以下场景:

1. index.html 页面加载 angular 并包含:ui-view
2. layout.html 页面包含从服务器解析数据的左侧菜单
3. homepage.html 使用 layout.html 作为他的父级，但需要从服务器解析他自己的数据.

问题是:当我解决孩子没有解决的父母时，当我删除父解析时，子解析.

The problem is : when i resolve the parent the child is not resolving, when i remove the parent resolve, the child resolves.

你能帮我，让我知道我做错了什么吗?

can you help me, and let me know what am i doing wrong?

app.js

$stateProvider
    .state('layout', {
        url: "",
        templateUrl: 'partials/layout.html',
        controller:'LayoutController',
        abstract:true,
        resolve : {
            result_data: function ($q,CommonService)
            {
                return resolve_layout($q,CommonService)
            }
        }
    })
    .state('homepage', {
        url: "/homepage",
        templateUrl: 'partials/homepage.html',
        parent: 'layout',
        controller:'HomepageController',
        resolve : {
            result_data: function ($q,CommonService)
            {
                return resolve_homepage($q,CommonService)
            }
        }
    })

推荐答案

resolve 功能应该适用于父母和孩子.有一个指向工作插件的链接.

A resolve functionality should work for both - parent and child. There is a link to working plunker.

两个resolve都会被触发，ui-router会一直等到它们都被执行.在孩子身上，我们可以为父母解决问题，也可以为父母解决问题.所以我建议更改名称(但不需要)并这样做:

Both resolves will be triggered, and ui-router will wait until both of them are executed. In a child we can get the stuff resolved for parent, as well its own. So I would suggest to change the names (but it is not needed) and do it like this:

.state('layout', {
    url: "",
    templateUrl: 'partials/layout.html',
    controller:'LayoutController',
    abstract:true, 
    resolve : {
        result_data: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a parent");
             }, 500);
            return deferred.promise;
        } 
    }
})
.state('homepage', {
    url: "/homepage",
    templateUrl: 'partials/homepage.html',
    parent: 'layout',
    controller:'HomepageController',
    resolve : {
        result_data_child: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a child");
             }, 500);
            return deferred.promise;
        }
    } 

现在，我们确实有两个可用参数:result_data 和 result_data_child.所以这些可能是我们的控制器:

Now, we do have two params available: result_data and result_data_child. So these could be our controllers:

.controller('LayoutController', function ($scope, $state, result_data) {
    $scope.state = $state.current;
    $scope.result_data = result_data;
})
.controller('HomepageController', function ($scope, $state, result_data, result_data_child) {
    $scope.state = $state.current;
    $scope.result_data_parent = result_data;
    $scope.result_data_child  = result_data_child;
})

总结.正如我们所见，这里，解决功能对两者都有效.此外，both (父母和孩子) 必须在导航到孩子时解决，然后才能允许此状态.

Summary. As we can see here, resolve feature is working for both. Also both (parent and child) must be resolved, when navigating to child, before this state is allowed.

这篇关于角度 ui-route 状态父级和解析(嵌套解析)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！