Angularjs 注入服务在构造函数中没有定义

注意，我对角度（1或2）不太熟悉

我正在尝试编写一个Http的“超级”层，以避免在任何地方都放置相同的头

import {Http, ConnectionBackend, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs';
import {LoadingService} from "../../services/loading.service";

export class HttpLoading extends Http {
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions,
        private _ls: LoadingService )
    {
        super(backend, defaultOptions);
    }

    getPostPutHeader() {
        var authHeader = new Headers();
        authHeader.append("Authorization", "Bearer "+ localStorage.getItem('token') );
        authHeader.append('Content-Type', 'application/json');
        return authHeader;
    }

    post(url: string, data:any):Observable<Response> {
        this._ls.isLoading = true; // Exception here: this._ls is undefined
        return super.post(url, data, { headers: this.getPostPutHeader() })
            .map(res => {
                this._ls.isLoading = false;
                return res;
            });
    }
}

我的引导程序中有很多东西，包括HttpLoading、LoadingService和ConnectionBackend（对于最后一个，如果它不在这里，我会得到一个异常）

问题是，我第一次调用

HttpLoading

的

post

方法（在另一个服务中）时，在

this.\ls.isLoading

处出现异常，因为

this.\u ls

未定义，我无法解释原因

如果你需要更多的信息，请告诉我

---

编辑

LoadingService

已正确注入my

AppComponent

（主组件）中

---

势解

您的公共/私有参数似乎必须放在列表的第一位。我会让比我更熟练的人解释为什么

export class HttpLoading extends Http {

    constructor(private _ls: LoadingService, backend: ConnectionBackend, defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
}

---

在引导应用程序时，我会在提供程序中以这种方式配置您的

HttpLoading

类：

bootstrap(AppComponent, [
  (...)
  HTTP_PROVIDERS,
  {
    provide:Http,
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, loadingService: LoadingService) => {
      return new HttpLoading(backend, defaultOptions, loadingService);
    },
    deps: [XHRBackend, RequestOptions, LoadingService]
  }
]);

这样做的原因是您希望为Http提供程序使用自己的类。您需要通过

HttpLoading

类更改Http提供程序后面的类。请注意在HTTP\u提供者之后定义它

---

为了能够将

XHRBackend

的实例注入到您的类中，您需要使用

useFactory

…

好的，我知道这可能看起来很简单，但是尝试创建一个变量并在构造函数中初始化它来扩展@Thierry Templier的答案。我使用的是Angular v4，根据我的经验，您需要提供扩展构造函数所需的所有依赖项，并且按照正确的顺序—我想这是Angular 1.x中的一种传统方法

我的例子是：

//这是我的扩展类（仅相关部分）

//这是在app.module.ts中定义的提供程序工厂：

export function httpClientFactory(
        backend: XHRBackend,
        defaultOptions: RequestOptions,
        router: Router,
        loaderService: LoaderService,
        modalService: ModalService,
        localStorageService: LocalStorageService
    ) : Http
{
    return new HttpService(
        backend,
        defaultOptions,
        router,
        loaderService,
        modalService,
        localStorageService
    );
}

providers: [
    ModalService
    LocalStorageService,
    LoaderService,
    {
        provide: HttpService,
        useFactory: httpClientFactory,
        deps: [XHRBackend, RequestOptions, Router, LoaderService, ModalService, LocalStorageService]
    }

这是app.module.ts中的配置（仅保留相关部分）：

export function httpClientFactory(
        backend: XHRBackend,
        defaultOptions: RequestOptions,
        router: Router,
        loaderService: LoaderService,
        modalService: ModalService,
        localStorageService: LocalStorageService
    ) : Http
{
    return new HttpService(
        backend,
        defaultOptions,
        router,
        loaderService,
        modalService,
        localStorageService
    );
}

providers: [
    ModalService
    LocalStorageService,
    LoaderService,
    {
        provide: HttpService,
        useFactory: httpClientFactory,
        deps: [XHRBackend, RequestOptions, Router, LoaderService, ModalService, LocalStorageService]
    }

---

注意：请注意，与工厂构造函数相比，在配置中声明DEP的顺序。。如果不是太麻烦的话，你能解释一下为什么吗？另外，我认为你缺少了一个结束的卷曲括号；我的想法有错误我在回答中加了一些解释。。。如果它回答了你的问题，请随时告诉我。。。否则，你是对的。A

{

需要删除；-）谢谢你指出这一点！非常感谢。我仍然不了解所有内容，但这只是一个开始！那“替换”了吗当我在我的组件中使用Http时，会自动使用HttpLoading的Http？我应该在HttpLoading的构造函数中将ConnectionBackend替换为XHRBackend吗？我还建议这样做--优化引擎可能会删除对该依赖项的引用。此外，我不知道它将如何工作，这在任何级别上都不是一个解决方案在构造函数中注入的ice应始终在底层上下文中可用。

export function httpClientFactory(
        backend: XHRBackend,
        defaultOptions: RequestOptions,
        router: Router,
        loaderService: LoaderService,
        modalService: ModalService,
        localStorageService: LocalStorageService
    ) : Http
{
    return new HttpService(
        backend,
        defaultOptions,
        router,
        loaderService,
        modalService,
        localStorageService
    );
}

providers: [
    ModalService
    LocalStorageService,
    LoaderService,
    {
        provide: HttpService,
        useFactory: httpClientFactory,
        deps: [XHRBackend, RequestOptions, Router, LoaderService, ModalService, LocalStorageService]
    }