Question

我有一个用TypeScript构建的Angular服务，它将toastr作为依赖项注入，我收到以下错误：

Error: [$injector:unpr] Unknown provider: toastrProvider <- toastr <- toaster

这是服务：

module app {
    'use strict';        

    export interface IToasterService {
        toastrDefaults(): ToastrOptions;
        success: (text: string, title?: string, optionsOverride?) => void;
        info: (text: string, title?: string, optionsOverride?) => void;
        warning: (text: string, title?: string, optionsOverride?) => void;
        error: (text: string, title?: string, optionsOverride?) => void;
    }

    export class ToasterService implements IToasterService {

        static $inject: Array<string> = ['toastr'];
        constructor(private toastr: Toastr) {
        }

        toastrDefaults(): ToastrOptions {
            var toastrOptions: ToastrOptions = {
                timeOut: 2000,
                extendedTimeOut: 1000,
                positionClass: "toast-top-right-content"
            };

            return toastrOptions;
        }

        success(text, title, optionsOverride) {
            this.toastrDefaults();
            this.toastr.success(text, title, optionsOverride);
        }

        info(text, title, optionsOverride) {
            this.toastrDefaults();
            this.toastr.info(text, title, optionsOverride);
        }

        warning(text, title, optionsOverride) {
            this.toastrDefaults();
            this.toastr.warning(text, title, optionsOverride);
        }

        error(text, title, optionsOverride) {
            this.toastrDefaults();
            this.toastr.error(text, title, optionsOverride);
        }
    }

    angular.module('app').service('toaster', ToasterService);
}

我尝试了许多不同的解决方案。到目前为止，没有任何工作。有什么想法吗？

Answer 1

令人沮丧的是，这个问题一直困扰着我至少一个月，我可能已经解决了，但我不确定它是多么正确。我将在这里留下这个答案供其他人评论，以防这个修复有任何后果。

module app {
    'use strict';        

    export interface IToasterService {
        toastrDefaults(): ToastrOptions;
        success: (text: string, title?: string, optionsOverride?) => void;
        info: (text: string, title?: string, optionsOverride?) => void;
        warning: (text: string, title?: string, optionsOverride?) => void;
        error: (text: string, title?: string, optionsOverride?) => void;
    }

    export class ToasterService implements IToasterService {

        constructor() {
        }

        toastrDefaults(): ToastrOptions {
            var toastrOptions: ToastrOptions = {
                timeOut: 2000,
                extendedTimeOut: 1000,
                positionClass: "toast-top-right-content"
            };

            return toastrOptions;
        }

        success(text, title, optionsOverride) {
            toastrDefaults();
            toastr.success(text, title, optionsOverride);
        }

        info(text, title, optionsOverride) {
            toastrDefaults();
            toastr.info(text, title, optionsOverride);
        }

        warning(text, title, optionsOverride) {
            toastrDefaults();
            toastr.warning(text, title, optionsOverride);
        }

        error(text, title, optionsOverride) {
            toastrDefaults();
            toastr.error(text, title, optionsOverride);
        }
    }

    angular.module('app').service('toaster', ToasterService);
}

我完全取消了注射。现在，这有效。但这是对的吗？

Answer 2

另一种方法：首先使用Toastr类型将原始toastr.js注入值服务。然后将值服务注入自定义NotifierService。这可以修复提供程序错误，因为值服务是提供程序。不知道这种方法是否有所改进。将toastr.js注入值服务的想法首先来自于Joe Eames在Mean Stack上的非类型脚本PluralSight视频。

`

((): void => {
    'use strict';
    let toasterService: Toastr;

    angular.module('app.common')
        .value('toastrService', toastr);
})();

namespace App.Common {
    'use strict';

    export interface INotifier {
        success(message: string): void;
        error(message: string): void;
        warning(message: string): void;
    }

    export class Notifier implements INotifier {
        static $inject = ['toastrService'];
        constructor(private toastrService: Toastr) {
            this.toastrService.options =
            {
                showDuration: 300,
                timeOut: 2000,
                toastClass: 'toast-top-right'

            }as ToastrOptions;
        }

        success(message: string): void {
            this.toastrService.success(message); 
        }

        error(message: string): void {
            this.toastrService.error(message);
        }

        warning(message: string): void {
            this.toastrService.warning(message);
        }
    }

    angular
        .module('app.common')
        .service('App.Common.Notifier', Notifier);
}

`

错误：[$ injector：unpr]未知提供者：toastrProvider＆lt; - toastr＆lt; - 多士炉

2 个答案: