依赖注入不加载所有PARAMS(Dependency injection does not load

我目前正试图创建一个自定义XHRBackend我angular2应用程序。 我要赶一个401 HTTP响应代码（非授权）所有的HTTP响应重定向登录页面上的用户。 但是，这才是我的问题：DI无法加载Router在我定制的后端 。

@Injectable()
export class CustomXHRBackend extends XHRBackend {
    constructor(
        _browserXHR: BrowserXhr, 
        _baseResponseOptions: ResponseOptions, 
        _xsrfStrategy: XSRFStrategy,
        private router : Router) {
        super(_browserXHR, _baseResponseOptions, _xsrfStrategy);
        console.log(router); // --> undefined
    }

    createConnection(request: Request) {
        let xhrConnection = super.createConnection(request);
        xhrConnection.response = xhrConnection.response.catch((error, caugth) => {
            if(error.status === 401) {
                //Do stuff with the new router
                this.router.navigate(['/login']);
            }
            return Observable.throw(caugth);
        });
        return xhrConnection;
    }
}

这似乎是DI仍然使用的元数据XHRBackend ，因为第3个PARAMS定义。

---

我创建了一个plunkr，演示了这个问题： http://plnkr.co/edit/44imf9KpE06cIyQ395sg?p=preview

注意：

该plunkr是基于angular2路由器例子，不幸的是我没有足够的时间来创建一个较小的一个。 最重要的文件是custom.backend.ts也许main.ts 。

---

有一个人的想法，为什么发生这种情况？

Answer 1:

对于这一点，我将扩展Http类代替。 下面是一个例子：

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // do something
    });
  }
}

并如下所述来注册它

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

编辑

我认为你需要提供明确的参数使用useFactory ：

import {provide} from '@angular/core';
import {Router} from '@angular/router';
import { bootstrap }            from '@angular/platform-browser-dynamic';
import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import {HTTP_PROVIDERS, Http,RequestOptions, XHRBackend, XSRFStrategy, BrowserXhr} from '@angular/http';
import {CustomXHRBackend} from './custom.backend';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(XHRBackend, {
    useFactory: (browserXHR: BrowserXhr, requestOptions: RequestOptions, xsrfStrategy: XSRFStrategy, router: Router) => {
      return new CustomXHRBackend(browserXHR, requestOptions, xsrfStrategy, router);
    },
    deps: [BrowserXhr, RequestOptions, XSRFStrategy, Router]
  })
]);

看到这个plunkr： http://plnkr.co/edit/JK3q5nspZ434AeJJsUeJ?p=preview 。

文章来源: Dependency injection does not load all params