从 ui 路由器状态解析中观察父控制器值答案

【问题标题】：watch parent controller value from ui router state resolve从 ui 路由器状态解析中观察父控制器值
【发布时间】：2020-01-07 14:28:41
【问题描述】：

在我使用 ui-router 的 AngularJS 应用程序中，我有三个状态。控制器中的父状态解析一个承诺，并在成功请求时执行代码。

在子状态portfolio.modal.patent，使用$stateProvider 和resolve 方法，我提出另一个请求。问题是我需要让resolve 方法等到父控制器portfolio 中返回promise。

国家

$stateProvider
.state('portfolio', {
    url: '/portfolio',
    templateUrl: 'app/templates/portfolio/portfolio.tpl.htm',
    controller: 'portfolioCtrl',
    controllerAs: '$ctrl',
})
.state('portfolio.modal', {
    abstract: true,
    views: {
        "modal": {
            templateUrl: "app/templates/patent/modal.html"
        }
    }
})
.state('portfolio.modal.patent', {
    url: '/:patentId',
    resolve: { //NEED TO MAKE THIS RESOLVE AFTER PORTFOLIO CONTROLLER HAS RETURNED ITS PROMISE
        patent: ['$stateParams', 'patentsRestService', function($stateParams, patentsRestService) {
            return patentsRestService.fetchPatentItem($stateParams.patentId);

        }],
    }
}

投资组合控制器

function portfolioCtrl() {
    $scope.promise
    .then(function(response) {
          //WHEN PROMISIS RETURNED, THEN RESOLVE DATA IN PORTFOLIO.MODAL.PATENT
    })
}

问题

从父状态控制器portfolioCtrl返回promise后，如何解析子状态portfolio.modal.patent数据

【问题讨论】：

你为什么不在父状态中也使用resolve？
性能问题。它必须获取大量数据，并且在解决之前不会加载状态，从而影响用户体验
作为一种可能的解决方法，尝试在您的服务中存储 $q 承诺并在父成功获取数据时解决它
@withrp 是这样的想法，但我该如何检查呢？

标签： javascript angularjs angular-ui-router

【解决方案1】：

这是一个快速可行的解决方法，您可以尝试使用服务作为请求之间的桥梁来解决您的问题

例子：

// service
const bridge = $q.defer();
const resolveBridgePromise = data => bridge.resolve(data);
const getBridgePromise = () => bridge.promise;

const fetchDataInParentCtrl = () => {
    $timeout(() => {
        console.log('data fetched in parent');

        resolveBridgePromise({ key: 'fetched data' });
    }, 2000);
  };

// controller
fetchDataInParentCtrl();

// resolver
getBridgePromise()
  .then(data => {
      console.log('Do http request here for your child data: ', data);
  });

【讨论】：