從狀態解析功能訪問返回的數據

Question

我正在使用AngularJS模塊的ui-router並使用resolve屬性來獲取項目的ID。

在一個單獨的文件中，我具有狀態patents.patent的組件patent ，該組件具有返回id的功能。 我需要訪問控制器返回的id ，以便隨后可以收集與所選項目相關的正確數據。

如何從控制器訪問resolve函數返回的值？

var app = angular.module('myApp', ['ui.router', 'chart.js']);

app.config(['$stateProvider', function($stateProvider) {

    $stateProvider
    .state('patents', {
        url: '/patents',
        component: 'patents',
        resolve: {
            patents: function(patentsService) {
                return patentsService.fetchAllPatents();
            },
            graphs: function(patentsService) {
                return  patentsService.fetchGraphData();
            }

        }      
    })
    .state('patents.patent', {
        url: '/{patentId}',
        component: 'patent',
        resolve: {
            patent: function(patents, $stateParams) {
                return patents.find(function(patent){ 
                    return patent.id == $stateParams.patentId;
                })
            },
            graph: function(graphs, $stateParams) {
                return graphs.dataset.find(function(graph){
                    return graph.id == $stateParams.patentId; //NEED THIS VALUE
                })
            }
        }
    })

}]);

---

angular.module('myApp').component('patent', {
    bindings: { 
        patent: '=' ,
    },
    templateUrl: '../templates/patents/list/patent-item.htm',
    controller: function() {
        var vm = this;

        //WHERE I NEED TO ACCESS THE RETURNED VALUE

    }
});

Answer 1

正如Vivz指出的那樣，注入控制器應該可以，但是您需要確保防止出現縮小問題：

angular.module('myApp').component('patent', {
  bindings: { 
    patent: '=' ,
  },
  templateUrl: '../templates/patents/list/patent-item.htm',
  controller: ['graph', function(graph) {
    var vm = this;

    //WHERE I NEED TO ACCESS THE RETURNED VALUE

  }]
});

Answer 2

要訪問已解析的數據，您只需將它們定義為與控制器的綁定。 就像您已經完成patent 。 然后，您可以通過vm變量（或此變量）訪問它們。

angular.module('myApp').component('patent', {
    bindings: { 
        patent: '<' ,
        graph: '<'
    },
    templateUrl: '../templates/patents/list/patent-item.htm',
    controller: function() {
        var vm = this;

        vm.$onChanges = function(changeObj){
            if(changeObj.patent){
                console.log('I am your patent', vm.patent);
            }
            if(changeObj.patent){
                console.log('I am your graph', vm.graph);
            }
        }
    }
});

正如@rrd所建議的那樣，您應該保護您的控制器免受縮小的影響，不僅如此，您還應該保護您的resolve函數免受縮小的影響。

像這樣：

resolve: {
    patents: ['patentsService', function(patentsService) {
        return patentsService.fetchAllPatents();
    }],
    graphs: ['patentsService', function(patentsService) {
        return  patentsService.fetchGraphData();
    }]
}