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

How to properly access AngularJS service in es6

本文关键字：AngularJS 服务 中的 es6 何正确 访问      更新时间：2024-03-30

我正在尝试访问服务的属性，我认为将服务注入类的方式有问题。我在运行应用时收到以下错误消息

angular.js:13424 ReferenceError：CouponsService未定义

CouponsComponent$onInit（优惠券.控制器.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
        });
})();

问题在于变量的作用域。当您将变量注入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，这样您的构建工具可以帮助更好地进行注入。

您必须使用可注入服务来装饰您的类。

添加：

CouponComponent.$inject = ['$state', 'CouponService'];
相关文章：