如何将 AngularJS 1 服务转换为 Angular 2 服务？

Question

我正在尝试在 Angular 2 环境中重用用纯 JavaScript 编写的 AngularJS 1 服务中的一些工作代码。

例如，服务看起来像以下示例：

(function () {
    angular.module('myapp.mysubmodule').factory('myappMysubmoduleNormalService', ['someOtherService',
        function (someOtherService) {
            var internalState = {
                someNumber: 0
            };
            var service = {};

            service.someFunction = function () {
                internalState.someNumber++;
            };

            someOtherService.getValues().forEach(function (v) {
                service[v] = function () {
                    console.log(v + internalState.someNumber);
                };
            });

            return service;
        }]);
})();

我找到了各种如何将 AngularJS 1 服务转换为 Angular 2 服务的示例（例如 this one），所有这些都有一个共同点，即我必须导出一个类，而不是服务工厂。

这个应该大致如下：

import { Injectable } from '@angular/core';

@Injectable()
export class myappMysubmoduleNormalService {
    someFunction: function () {
        // ?
    }
}

现在，问题是如何合并内部状态和动态添加的属性。 这真的是在构造函数中完成所有这些的方法吗，即在初始化时填充类的每个实例，如下所示：

import { Injectable } from '@angular/core';

@Injectable()
export class myappMysubmoduleNormalService {
    constructor() {
        var internalState = {
            someNumber: 0
        };
        var service = {};

        this.someFunction = function () {
            internalState.someNumber++;
        };

        this.getValues().forEach(function (v) {
            service[v] = function () {
                console.log(v + internalState.someNumber);
            };
        });
    }
}

或者还有其他方法吗？以上可能有效（除了缺少依赖注入，我仍然需要了解如何在 Angular 2 中执行此操作）。但是，我想知道这是否是一个好方法，因为我没有遇到任何在其构造函数中进行大量成员初始化的示例。

Answer 1

您可以在 Angular 中使用与 factory providers 相同的方法：

  export function someServiceFactory(someOtherService) {
    var internalState = {
      someNumber: 0
    };
    var service = {};

    service.someFunction = function () {
      internalState.someNumber++;
    };

    someOtherService.getValues().forEach(function (v) {
      service[v] = function () {
        console.log(v + internalState.someNumber);
      };
    });

    return service;
  };

@NgModule({
  providers: [
    {
      token: 'myappMysubmoduleNormalService',
      useFactory: someServiceFactory,
      deps: ['someOtherService']
    }
  ]
})

在 Angular 和 AngularJS 中，工厂函数返回的值都会被缓存。

Answer 2

服务只是一个可以注入组件的类。它将在命名为提供者的范围内创建一个单例。

import { Injectable. OnInit } from '@angular/core';

@Injectable()
export class myappMysubmoduleNormalService implements OnInit {
internalState: number;

 constructor() {}

ngOnInit(){

    this.internalState = 0;
}

incrementSomeNumber() {
  this.internalState++;
  console.log(this.internalState};
}


}

我意识到这不是为多个函数记录不同的内部状态，但你明白了。

将此注册为 app.module 中的提供者（如果您想要应用范围的单例）

当你导入一个组件然后注入到构造函数中时

constructor(private _myservice : myappMysubmoduleNormalService) {}

您现在可以使用 _myservice 方法

myNumber : number = 0 ;

componentFunction() {
     _myservice.incrementSomeNumber();
     this.myNumber = _myservice.internalState;
}

当然，您可以让服务方法返回递增的数字（或数据或数据的承诺）

这很粗略，但给了你想法。很少有代码属于构造函数。应该注入一个服务。组件构造函数中显示的内容是引用服务的获取私有变量的简写。该服务将是提供它的范围内的单例。 （可以在范围内被覆盖，但这对我来说似乎是一种代码味道）

传回一个值：

服务中

 incrementSomeNumber(): number {
 this._internalState++;
  console.log(this._internalState};
 return this._internalState;
 }

在组件中： 我的号码：号码；

componentFunction() {
    this.mynumber = _myservice.incrementSomeNumber();
}

不确定您要完成什么，但只是想展示从服务获取信息的示例。对我来说，最常见的服务使用是数据服务，所以代码会稍微复杂一些，因为它是异步的。