Angular 2/4 Service Provider 不编译函数

Question

我有一个通用的 REST 服务，我想使用服务提供商调用它，以便我可以传入 URL。我想这样做，以便该服务可以跨多个项目（每个项目使用不同的 REST API）甚至在同一项目的不同组件中重复使用。

我有以下服务提供商：

import { Http } from '@angular/http';

import { ODataService } from './odata.service';

export function ODataServiceProvider(url: string) {
    return {
        provide: ODataService, 
        useFactory: (http: any) => {
            return new ODataService(url, http);
        },
        deps: [Http]
    }
}

我现在理论上应该能够在单个组件或 app.module 级别使用此服务提供者并通过 url；我已经在 app.module.ts 中完成了，就像这样：

providers: [ 
      SafeUrlPipe,
      ODataServiceProvider("http://services.odata.org/V3/(S(pq1lpmgz0kuok05ubqtx1c2g))/OData/OData.svc/") 
  ],

这现在将在我为项目（或构建）提供服务时出现错误：

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 8:21 in the original .ts file), resolving symbol ODataServiceProvider in C:/dev/SVN/Products/PredictiveAnalytics/Trunk/Glencor eAnalyticsPortal/GlencoreAnalyticsPortal.Webclient/src/app/shared/services/odata/odata.serviceProvider.ts, resolving symbol AppModule in C:/dev/SVN/Products/P redictiveAnalytics/Trunk/GlencoreAnalyticsPortal/GlencoreAnalyticsPortal.Webclient/src/app/app.module.ts, resolving symbol AppModule in C:/dev/SVN/Products/Pr edictiveAnalytics/Trunk/GlencoreAnalyticsPortal/GlencoreAnalyticsPortal.Webclient/src/app/app.module.ts

但是，如果我在服务和监视项目时保存任何文件，它现在不会抛出错误，一切都会按预期进行。任何线索如何解决这个问题？这是 Angular 问题吗？

Answer 1

我不知道为什么会这样，但我遇到了类似的问题并按如下方式解决。

导出 returns 您的服务在您的 ngmodule 外部构建的函数，然后在您的提供者内部使用 {provide:, useFactory:}

调用它

export function myDataService() {  
  return ODataServiceProvider("http://services.odata.org/V3/(S(pq1lpmgz0kuok05ubqtx1c2g))/OData/OData.svc/");
}
@NgModule({
  ...
  providers: [ 
      SafeUrlPipe,
      {
        provide: MyProvider,
        useFactory: myDataService
      }
  ]
})

一定是这样的...

Answer 2

使用注入令牌并稍微更改服务提供商使其按预期工作：

新的服务提供商是这样的：

import { Http } from '@angular/http';
import { ODataService } from './odata.service';
import { InjectionToken } from '@angular/core';

export const URL = new InjectionToken<string>('url');

export function ODataServiceProvider(url: string, http: Http) {
    return new ODataService(url, http);
}

现在有一个可以注入的名为 URL 的简单字符串，提供者现在有 2 个 dependencies/parameters 它需要。我们将把这两个都注入进去，这可以在任何组件中完成，如下所示（省略了不必要的代码）：

import { ODataServiceProvider, URL } from './shared/services/odata/odata.serviceProvider';
import { Http } from '@angular/http';
import { ODataService } from './shared/services/odata/odata.service';


providers: [ 
    {
        provide: URL,
        useValue: 'http://services.odata.org/V3/(S(pq1lpmgz0kuok05ubqtx1c2g))/OData/OData.svc/'
    },
    {
        provide: ODataService,
        useFactory: ODataServiceProvider,
        deps: [URL, Http]
    }
  ]

注意 URL 现在被指定为提供者，然后在部门中使用，这将允许它被注入到服务提供者。

不确定这是否是最好的做事方式，但它似乎有效。

如果服务提供商需要一组配置，如 Angular API 中所示，那么您实际上可以将 URL 字符串作为接口：

=12=]

Angular 2/4 Service Provider 不编译函数

Angular 2/4 Service Provider does not compile if a function

service-provider

angular2-services

angular