3

对于注释，我对 Angular 非常陌生（就此而言是 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 中。

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

@Injectable()
export class LoadingService {
    isLoading: boolean = false;
}

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

bootstrap(AppComponent, [
    ConnectionBackend,
    HttpLoading,
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    LoadingService,
    disableDeprecatedForms(),
    provideForms()
])

问题是我第一次调用HttpLoading'spost方法（在另一个服务中）时，我在this._ls.isLoading, 因为this._ls是未定义的，所以我得到一个异常，我不知道为什么。

如果您需要更多信息，请告诉我。

编辑

LoadingService正确注入我的AppComponent（主要组件）。

//imports
//@Component
export class AppComponent {
    requesting:boolean = false;

    constructor(public authService: AuthService, private router: Router, private _ls: LoadingService) {
    }

    navigate(route:string) {
        this._ls.isLoading = true;
        this.router.navigate([route])
            .then(() => this._ls.isLoading = false);
    }
}

潜在的解决方案

看来您的公共/私有参数必须放在列表的首位。我会让比我更熟练的人解释原因，不过......

export class HttpLoading extends Http {

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

3 回答 3

2

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 提供程序使用自己的类。您需要通过您的班级更改 Http 提供者背后的HttpLoading班级。之后要小心定义它HTTP_PROVIDERS。

为了能够将实例注入XHRBackend到您的类中，您需要使用useFactory...

于 2016-07-06T20:03:06.330 回答
0

扩展@Thierry Templier 的答案。我正在使用 Angular v4，我的经验是您需要提供扩展构造函数所需的所有依赖项，并且以正确的顺序 - 我想这是从 angular 1.x 开始的传统方式。

我的例子：

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

@Injectable()
export class HttpService extends Http {

    constructor(
        backend: ConnectionBackend,
        defaultOptions: RequestOptions,

        private router: Router,
        private loaderService: LoaderService,
        private modalService: ModalService,
        private localStorageService: LocalStorageService
    )
    {
        super(backend, defaultOptions)
    }

// 这是 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
    );
}

这是 app.module.ts 中的配置（只留下了相关部分）：

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

注意：请注意在配置中声明 deps 的顺序与工厂构造函数相比。它是相同的

于 2017-07-18T22:36:41.513 回答
0

好的，我知道这可能看起来微不足道，但尝试创建一个变量并在构造函数中初始化它

于 2016-07-06T20:03:33.703 回答