2017-09-01 6 views
2

Angle 4.3+の新しいHTTPインターセプタ機能を利用しようとしています。私は丁度うまく動作するインターセプタを持っています。しかし、私はエラーをキャッチし、angular2-toasterを使ってトースト様式の通知を出したいと思います。すべてのトースト機能をサービスに入れます、ToasterNotificationService。しかし、私がそのサービスをインターセプタの内部で使用しようとすると、うまく動作しません。サービスを使用するAngular HTTPインターセプタ

コンストラクタでToasterNotificationServiceをインターセプタで初期化して使用しようとすると、エラーが発生します。これはNo provider for xxxです。だから私が@angular/coreからInjectorをインポートした場合は、それをコンストラクタで初期化してから、ToasterNotificationServiceのインスタンスを手動で注入しようとすると、要求は消滅します。同様に、文字通り停止し、決してサーバーに送信されません。 、

intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    console.log(req); 
    const toaster = this.injector.get(ToasterNotificationService); 


    return next.handle(req) 
     .do((ev: HttpEvent<any>) => { 
      if (ev instanceof HttpResponse) { 
       console.log('ev in the do: ', ev); 
      } 
     }) 
     .catch((response: any) => { 
      if (response instanceof HttpErrorResponse) { 
       console.log('response in the catch: ', response); 
       toaster.error('Unexpected Error', response.error.message); 
      } 

      return Observable.throw(response); 
     }); 
} 

これをやっライン2作品にconsole.logが、その後の要求は死ぬ:ここに私のインターセプタの私intercept機能の一例です。コンソールや端末でエラーがポップアップすることはなく、要求はサーバーにヒットしません。

トースターを参照する2行をコメントアウトするだけで、要求はサーバーに送られます。

誰も私がこの問題を回避するために何をすることができますか?

編集

ここで私はこれらの2つのサービスを宣言私app.module.tsのプロバイダセクションです:

providers: [ 
    ToasterNotificationService, 
    { 
     provide: HTTP_INTERCEPTORS, 
     useClass: ErrorInterceptorService, 
     multi: true, 
    } 
] 

を私は考え出しHTTP_INTERCEPTORS

+1

インターセプタをインポートしたのと同じモジュールでトーストサービスをインポートしましたか? – TheUnreal

+0

同じ質問をしたかったのですが、トースターサービスのプロバイダを設定した場合は、インジェクタを使用して注射するのに問題があります。 –

+0

申し訳ありませんが、元の質問にそのセクションを入れておく必要があります。 'app.module.ts'のためにプロバイダをどのように宣言したかについては、編集を見てください。 – pjlamb12

答えて

0

前と後ToasterNotificationServiceを宣言しようとしたがエラー。 ToasterServiceangular2-toasterからインポートして、私のカスタムToasterNotificationServiceで使用しましたが、私のアプリケーションのprovidersでこれを宣言したことはありません。それをやって、3つのサービスをすべて宣言すれば、すべてが再び期待どおりに機能しました。

関連する問題