Question

我目前正在使用Angular 1.5。我使用ui-router作为我的主要导航机制。我正在利用Angular组件。

我理解我可以在我的状态上使用.resolve来实例化服务，然后通过我的组件层次结构向下传递（主要使用单向绑定）。

我的一个组件名为literatureList，用于多个路由/状态。 literatureList组件使用名为literatureListService的特定服务。 literatureListService仅由literatureList使用。 literatureListService需要一段时间来实例化，并使用promises等。

在每个.state定义中，我需要一个实例化文献列表服务的.resolve。这意味着我需要在每个.state.resolve对象中引用这个literatureListService。这对我来说似乎不太干。

我真正想要做的是从.state.resolve对象中删除literatureListService引用，然后解析＆＃39;来自＆＃39;内的服务literatureList组件本身。

如何编写＆＃39; resolve-style＆＃39;在文件列表组件中，将处理literatureListService的异步/承诺性质？这样做的最佳做法是什么？

代码段如下：

州摘录：

$stateProvider.state({
            name: 'oxygen',
            url: '/oxygen',
            views: {
                'spofroot': { template: '<oxygen booklist="$resolve.literatureListSvc"></oxygen>' }
            },
            resolve:{
                literatureListSvc: function(literatureListService){
                    return literatureListService.getLiterature();
                }
            }

        });
        $stateProvider.state({
            name: 'radium',
            url: '/radium',
            views: {
                'spofroot': { template: '<radium  booklist="$resolve.literatureListSvc"></radium>' }
            },
            resolve:{
                literatureListSvc: function(literatureListService){
                    return literatureListService.getLiterature();
                }
            }

        });

literatureListService：

angular.module('literature')
    .factory('literatureListService',function($http,modelService){


        // Remember that a factory returns an object, whereas a service is a constructor function that will be called with 'new'.  See this for a discussion on the difference: http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

        console.log('literatureListService factory is instantiating - this will only happen once for each full-page refresh');

        // This is a factory, and therefore needs to return an object containing all the properties that we want to make available
        var returnObject = {}; // Because this is a factory we will need to return a fully-formed object (if it was a service we would simply set properties on 'this' because the 'context' for the function would already have been set to an empty object


        console.log('service instantiation reporting that modelManager.isDataDirty='+modelService.isDataDirty);

        // The getLiterature method returns a promise, and therefore can only be consumed via a promise-based mechanism
        returnObject.getLiterature = function($stateParams){

            console.log('literatureService.getLiterature will now return a promise (via a call to $http)');
            return $http({method: 'GET', url: 'http://localhost:3000/literature/'});
        };

        return returnObject;

    });

氧气成分html：

<div>
    This is the OXYGEN component which will now render a literature list, passing in bookList.data as books
    <literature-list books="$ctrl.booklist.data"></literature-list>
</div>

氧成分js

angular.module('frameworks')
    .component('oxygen',{

        templateUrl:"frontend/framework/frameworks/oxygenComponent.html",

        controller:function($http){

            var $ctrl = this;
            console.log('Hello from the oxygen component controller with literatureListSvc='+$ctrl.booklist); // Bound objects NOT YET AVAILABLE!!!!!!

            this.$onInit = function() {
                //REMEMBER!!!! - the bound objects being passed into this component/controller are NOT available until just before the $onInit event fires
                console.log('Hello from the oxygen component controller onInit event with bookList='+JSON.stringify($ctrl.booklist));

            };

        }
        ,bindings:{ // remember to make these lowercase!!!
            booklist:'<'

        }

    });

literatureList组件html：

<div>

    {{$ctrl.narrative}}

    <literature-line ng-repeat="literatureItem in $ctrl.books" wizard="fifteen" book="literatureItem" on-tut="$ctrl.updateItemViaParent(itm)">555 Repeat info={{literatureItem.title}}</literature-line>

</div>

literatureList组件js

angular.module('literature')
.component('literatureList',{
    templateUrl:'frontend/literature/literatureListComponent.html',
    //template:'<br/>Template here33 {{$ctrl.listLocalV}} wtfff',
    // controller:function(literatureListService){

    controller:function(){//literatureListService){

        var $ctrl=this;
        this.narrative = "Narrative will unfold here";

        this.updateItemViaParent = function(book){

             this.narrative = 'just got notified of change to book:'+JSON.stringify(book);



         };

        this.$onInit = function(){
            console.log('literatureList controller $onInit firing with books='+JSON.stringify($ctrl.books));
        };

        this.$onChanges = function(){
            console.log('literatureList controller $onChanges firing');
        };




    },
    bindings: {
        books:'<'

    }
});

Answer 1

作为基于参考的JavaScript，您可以在服务中创建对象并在所需的所有三个控制器中访问它。

例如：

function serviceA() {
    var vm = this;
    vm.testObject = {};
    vm.promise1().then(function(response) {
            vm.testObject = response;
        })
}

function ControllerA($scope, serviceA) {
    $scope.testA = service.testObject;
}

在这种情况下，只要解析了promise，所有控制器都将获得响应的值，并且可以分别在部分中使用

如何直接从Angular组件

1 个答案: