[英]What is the correct way to convert an Angular 1 provider to Angular 2
There are lot of documentation and examples on how to convert Angular 1 services and factories to Angular2 but I couldnt find anything on how to convert a ng1 provider to something equivalent in ng2.有很多关于如何将 Angular 1 服务和工厂转换为 Angular2 的文档和示例,但我找不到任何关于如何将 ng1 提供者转换为 ng2 中等效内容的信息。
Example provider示例提供程序
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);
What would be the correct equivalent for this in Angular 2?在 Angular 2 中,正确的等价物是什么?
Ok so finally we figured it out thanks to https://github.com/jhipster/generator-jhipster/issues/3664#issuecomment-251902173好的,最后我们想通了,感谢https://github.com/jhipster/generator-jhipster/issues/3664#issuecomment-251902173
Here is the Service in NG2这是 NG2 中的服务
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;
}
}
and here is the provider for the service这是服务的提供者
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]
}
}
Now you need to call the alertServiceProvider
method in the provider declaration of your module.现在,您需要在模块的提供程序声明中调用alertServiceProvider
方法。
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
...
alertServiceProvider()
],
exports: [
...
]
})
export class SharedCommonModule {}
The code is part of the JHipster project and you can browse actual templates here该代码是 JHipster 项目的一部分,您可以在此处浏览实际模板
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.