Angular2 Http Override inject Router

Question

古いコンポーネントルータを使用したAngular2 RC4アプリケーションでは、http：401のUnauthenticatedリクエストを受け取り、ログインページにリダイレクトするデフォルトのHttpクラスをオーバーライドしました。 このリダイレクトは角度ルータで発生します。

バージョン2.0.1にアップデートして、新しいルータを使用します。これを行うには、新しいルータをカスタムHttp上書きクラスに注入する必要があります。 コンパイルは成功しますが、Angularは実行されません。アプリケーションが起動すると、最初のコンポーネントがロードされる前にカスタムhttpクラスの作成が試行されるためです。最初のコンポーネントをロードする前に新しいルータを挿入することはもはや不可能です。

ここに進むにはどうすればよいでしょうか？ Http上書きクラスをインスタンス化した後、手動でルータを注入する必要がありますか？ これはどのように行うことができますか？

以下は、古いルータでRC4で動作するカスタムHttpクラスのコードです。 最終バージョンにアップデートするとき、ルータはこのクラスにもう注入できないので、問題はcatchUnauthorizedにあります。

import {Injectable} from "@angular/core"; 
import {Http, Headers, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Request} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import {Router} from '@angular/router-deprecated'; 

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

postJson(url: string, object: any, options: RequestOptionsArgs = {}): Observable<Response> { 
    var body = JSON.stringify(object); 

    if(!options.headers) 
    { 
     options.headers = new Headers(); 
    } 

    options.headers.set("Content-Type", "application/json"); 

    return this.post(url, body, options); 
} 

request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    return super.request(url, options) 
     .catch(this.catchUnauthorized); 
} 

get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.get(url, options) 
     .catch(this.catchUnauthorized); 
} 

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.post(url, body, options) 
     .catch(this.catchUnauthorized); 
} 

put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.put(url, body, options) 
     .catch(this.catchUnauthorized); 
} 

delete(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.delete(url, options) 
     .catch(this.catchUnauthorized); 
} 

patch(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.patch(url, body, options) 
     .catch(this.catchUnauthorized); 
} 

head(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.head(url, options) 
     .catch(this.catchUnauthorized); 
} 

public catchUnauthorized = (error: Response) => { 
    if (error.status === 401 || error.status === 440) { 
     var currentInstruction = this.router.currentInstruction; 
     var instruction = this.router.generate(["/Login", { "session": "true", "returnUrl": currentInstruction.toLinkUrl() }]); 

     if (currentInstruction.urlPath != instruction.urlPath) 
      this.router.navigateByInstruction(instruction); 

     return Observable.throw('Sessie verlopen!'); 
    } 
    if (error.status === 403) { 
     this.router.navigate(['/Error', { 'error': 'forbidden' }]); 
     return Observable.throw('Forbidden!'); 
    } 
    return Observable.throw(error); 
}; 
} 

Answer 1

私は同じ問題がありました。 「DEPS」に「ルータ」を追加してください：あなたはカスタムクラスを使用する場合は

... 
providers: [ 
{ 
    provide: CustomHttp, 
    useFactory: (backend: XHRBackend, options: RequestOptions, route: Router) => { 
    return new CustomHttp(backend, options, route); 
    }, 
    deps: [ XHRBackend, RequestOptions, Router ] 
} 
... 

Answer 2

が、「角度/ HTTP @」からの輸入をeverywhhere持って、プロバイダは角/ HTTP @」からのHTTPクラスを提供する必要があります」、あなたもCustomHttpクラスとして、同じファイルにhttpFactory方法を置くことができます

import {Http} from '@angular/http'; 
import {CustomHttp} from 'my/custom/location'; 

function httpFactory(backend, options){ 
    return new CustomHttp(backend, options); 
} 

{ 
    provide: Http, 
    useFactory: httpFactory, 
    deps: [XHRBackend, RequestOptions] 
}