依存性注入がすべてのパラメータを読み込まない

Question

私は現在、angular2アプリケーション用にカスタムXHRBackendを作成しようとしています。私はログインページでユーザーをリダイレクトするために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; 
    } 
} 

最初の3つのparamsが定義されているので、DIはまだ、XHRBackendのメタデータを使用するように思えます。

---

私はこの問題を示しplunkrを、作成した：http://plnkr.co/edit/44imf9KpE06cIyQ395sg?p=preview

注：

plunkrがangular2ルータ例に基づいており、残念ながら私は小さなを作成するための十分な時間がありませんでした1。 重要なファイルは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。