一尘不染

角度ui路由状态的父级和resolve(嵌套的resolves)

angularjs

我有以下情况:

  1. index.html页面加载有角并包含:ui-view
  2. layout.html页面包含左侧菜单,该菜单可解析来自服务器的数据
  3. homepage.html使用layout.html作为其父项,但需要从服务器解析其自己的数据。

问题是:当我解决父问题时,孩子无法解决问题;当我删除父问题时,孩子解决问题。

您能帮我,让我知道我做错了吗?

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)
            }
        }
    })

阅读 194

收藏
2020-07-04

共1个答案

一尘不染

一项resolve功能应同时适用于父级和子级。有一个与正在工作的矮人有关的链接。

两个解析都将被触发,并且ui- router将等待直到两个解析都被执行。在孩子中,我们可以为父母解决问题,也可以自己解决。因此,我建议更改名称(但不是必需的),并像这样进行操作:

.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_dataresult_data_child。因此,这些可能是我们的控制器:

.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;
})

摘要。正如我们在这里看到的那样,解决功能同时适用于两者。另外
两个 (父母和子女) 必须 导航到孩子时,被允许这种状态之前得到解决。

2020-07-04