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）的示例，所有这些服务都有共同点，而不是服务工厂，我必须导出一个类。 / p>

此应大致如下：

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;
}

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

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

传回一个值：

在服务中

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

在组件中： mynumber：数字;

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

不确定您要完成的任务，但只是想展示从服务获取信息的示例。对我来说，最常见的服务使用是数据服务，所以代码会比asynch更复杂。

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

2 个答案: