如何在es6中正确访问AngularJS服务

Question

我试图访问我的服务属性，我认为我将该服务注入我的课程的方式有问题。运行我的应用程序时出现以下错误消息

  

angular.js：13424 ReferenceError：未定义CouponsService

     

在CouponsComponent。$ onInit（coupons.controller.js：13）

     

...

服务

angular.module('couponGeneratorApp')
  .service('CouponsService', function () {
    // AngularJS will instantiate a singleton by calling "new" on this function
    this.amount_type = null;
    this.amount = null;
    this.has_min = null;
    this.min_order = null;
  });

控制器

(function() {

    class CouponsComponent {
        constructor($state, CouponsService) {
            this.test = 'hello';
            this.state = $state;

            this.couponParams = {};
        }

        $onInit() {
            console.log(CouponsService);
        }

        processParams() {
            if (!this.couponParams.amount || this.couponParams.amount <= 0) {
                alert('Enter a valid amount');
            } else if (this.couponParams.has_min && (!this.couponParams.min_order || this.couponParams.min_order < 0)) {
                alert('Enter a valid min order');
            } else {
                CouponsService.amount_type = this.couponParams.amount_type;
                CouponsService.amount = this.couponParams.amount;
                CouponsService.has_min = this.couponParams.has_min;
                if (CouponsService.has_min) CouponsService.min_order = this.couponParams.min_order;
                this.state.go('coupons.login');
            }
        }
    }


    angular.module('couponGeneratorApp')
        .component('couponsForm', {
            templateUrl: 'app/coupons/form.html',
            controller: CouponsComponent
        });

    angular.module('couponGeneratorApp')
        .component('couponsLogin', {
            templateUrl: 'app/coupons/login.html',
            controller: CouponsComponent
        });
})();

Answer 1

问题在于变量的范围。当您将其注入ES6类时，构造函数方法不会使该变量可用于所有其他方法。就像您将$state设置为this.$state一样，您需要对其他方法将使用的任何注入服务执行相同的操作。

class CouponsComponent {
    constructor($state, CouponsService) {
        this.test = 'hello';
        this.state = $state;
        this.CouponsService = CouponsService;

        this.couponParams = {};
    }

    $onInit() {
        console.log(this.CouponsService);
    }

    // Rest of class
}

还建议使用ngAnnotate，这样您的构建工具可以帮助您更好地完成注射工作。

Answer 2

您必须使用注射服务装饰您的课程。

添加：

CouponComponent.$inject = ['$state', 'CouponService'];