把Angular 1的提供商转换成Angular 2的正确方法是什么?

What is the correct way to convert an Angular 1 provider to Angular 2

本文关键字：Angular 方法 是什么 提供商 转换      更新时间：2023-09-26

有很多关于如何将Angular 1的服务和工厂转换为Angular2的文档和示例，但我找不到任何关于如何将ng1的提供程序转换为ng2中的等效内容的文档和示例。

示例提供程序

function AlertService () {
    this.toast = false;
    this.$get = getService;
    this.showAsToast = function(isToast) {
        this.toast = isToast;
    };
    getService.$inject = ['$timeout', '$sce'];
    function getService ($timeout, $sce) {
        var toast = this.toast,
            alertId = 0, // unique id for each alert. Starts from 0.
            alerts = []
        return {
            factory: factory,
            add: addAlert
        };
        function factory(alertOptions) {
            var alert = {
                type: alertOptions.type,
                msg: $sce.trustAsHtml(alertOptions.msg),
                id: alertOptions.alertId,
                toast: alertOptions.toast
            };
            alerts.push(alert);
            return alert;
        }
        function addAlert(alertOptions) {
            alertOptions.alertId = alertId++;
            var alert = this.factory(alertOptions);
            return alert;
        }
    }

}
angular
  .module('angularApp', [])
  .provider('AlertService', AlertService);

在Angular 2中，它的正确等价是什么?

多亏了https://github.com/jhipster/generator-jhipster/issues/3664#issuecomment-251902173

我们终于算出来了

以下是NG2中的Service 

import {Injectable, Sanitizer, SecurityContext} from '@angular/core';
@Injectable()
export class AlertService {
    private alertId: number;
    private alerts: any[];
    constructor(private sanitizer: Sanitizer, private toast: boolean) {
        this.alertId = 0; // unique id for each alert. Starts from 0.
        this.alerts = [];
    }
    factory(alertOptions): any {
        var alert = {
            type: alertOptions.type,
            msg: this.sanitizer.sanitize(SecurityContext.HTML, alertOptions.msg),
            id: alertOptions.alertId,
            toast: alertOptions.toast
        };
        this.alerts.push(alert);
        return alert;
    }
    addAlert(alertOptions, extAlerts): any {
        alertOptions.alertId = this.alertId++;
        var alert = this.factory(alertOptions);
        return alert;
    }
    isToast(): boolean {
        return this.toast;
    }
}

，这里是服务的提供者

import { Sanitizer } from '@angular/core';
import { AlertService } from './alert.service';
export function alertServiceProvider(toast?: boolean) {
    // set below to true to make alerts look like toast
    let isToast = toast ? toast : false;
    return {
        provide: AlertService,
        useFactory: (sanitizer: Sanitizer) => new AlertService(sanitizer, isToast),
        deps: [Sanitizer]
    }
}

现在你需要调用模块的提供者声明中的alertServiceProvider方法。

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        ...
        alertServiceProvider()
    ],
    exports: [
        ...
    ]
})
export class SharedCommonModule {}

代码是JHipster项目的一部分，您可以在这里浏览实际的模板

相关文章：