如何在 Angular 2 最终服务中的静态方法中注入或使用 Http？答案

【问题标题】：How to inject or use Http inside static method in angular 2 final service?如何在 Angular 2 最终服务中的静态方法中注入或使用 Http？
【发布时间】：2017-04-02 19:57:34
【问题描述】：

我正在使用 Angular 2 最终版本。我在 Angular 2 中有一个验证器服务。我正在编写一个使用 HttpModule 的异步验证静态方法。那么在这种情况下，如何注入和使用Http，这样我就可以调用后端了。我尝试做出如下声明：静态http:Http;

然后尝试使用内部静态方法，例如 ValidationService.http.get() 但这会引发错误，比如 get is undefined。

有人可以解释一下吗？

【问题讨论】：

标签： http angular final inject

【解决方案1】：

@NgModule(...)
class AppModule {
  ngDoBootstrap(moduleRef) {
    let injector =  moduleRef.injector;
    // assign injector somewhere to a static field
  }
}

那么你可以像这样使用它

someStaticMethod() {
  let validationService = someStatic.injector.get(ValidationService);
}

您应该尽量避免使用静态方法。他们反对 Angular2s 架构。

【讨论】：

谢谢，那我想我应该改变静态的。我想我应该在谷歌上搜索更多信息。
您能详细说明解决方案吗？我在验证服务方面遇到了类似的问题，并且一直在按照本教程link 为表单创建验证。向服务注入 http 时，我得到未定义。我对静态函数有点不熟悉，不确定这是否是它不起作用的原因？
验证服务与静态方法有什么关系？最好创建一个新问题，在其中添加演示您尝试完成的任务的代码。

【解决方案2】：

我按照这篇文章 (http://www.adonespitogo.com/articles/angular-2-extending-http-provider/) 扩展了 Http 类并添加了一个返回单例 Http 的静态方法。

./services/http.service.ts

import { Injectable, ReflectiveInjector } from '@angular/core';
import {
    BaseResponseOptions,
    BaseRequestOptions,
    BrowserXhr,
    ConnectionBackend,
    CookieXSRFStrategy,
    Headers,
    Http as HttpParent,
    Request,
    RequestOptions,
    RequestOptionsArgs,
    Response,
    ResponseOptions,
    XHRBackend,
    XSRFStrategy
} from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class CustomHttp extends HttpParent {

    public static getInstance() {
        if (!(this._instance instanceof CustomHttp)) {
            this._instance = ReflectiveInjector.resolveAndCreate([
                CustomHttp, BrowserXhr, XHRBackend,
                { provide: ConnectionBackend, useClass: XHRBackend },
                { provide: ResponseOptions, useClass: BaseResponseOptions },
                { provide: XSRFStrategy, useFactory: () => {
                        return new CookieXSRFStrategy();
                    }
                },
                { provide: RequestOptions, useClass: BaseRequestOptions }
            ]).get(CustomHttp);
        }
        return this._instance;
    }

    private static _instance: CustomHttp;
}

./app.module.ts

import { NgModule } from '@angular/core';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { CustomHttp } from './services/http.service';

@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent
    ],
    imports: [
        HttpModule
    ],
    providers: [
        {
            provide: CustomHttp,
            useFactory: (backend: XHRBackend, options: RequestOptions) => {
                 return new CustomHttp(backend, options);
            },
            deps: [XHRBackend, RequestOptions]
        };
    ]
})
export class AppModule {}

./services/validation.service.ts

import CustomHttp from './http.service';

export class ValidationService {
    static public doSomething() {
        CustomHttp.getInstance().get('some/api/').subscribe(
            (response) => {
                 console.log(response);
            })
    }
}

我希望它对你有用。

【讨论】：

【解决方案3】：

我使用angular-starter 框架，我可以访问src/app/app.module.ts 文件中的注入器：

@NgModule({
    bootstrap: [ AppComponent ],  // due this method ngDoBootstrap is never call so we will get injector in constructor.
    ...
})
export class AppModule
{

    constructor(public appRef: ApplicationRef,
                public appState: AppState,
                public injector: Injector)
    {
        SomeStaticClass.angularInjector =  injector;
    }
...
}

您在OtherStaticClass 的静态方法中某处写：

SomeStaticClass.angularInjector.get(ValidationService);

【讨论】：