ng2-toastrがAngular 4.3.6サービスで呼び出されたときに適切なCSSを適用しない

Question

私のアプリケーションにng2-toastrを実装しようとしています。私は"@angular/compilercli": "^4.3.6",です。私は次のインターセプターをHTTPのフォームエラーを傍受する必要があります。

export class InterceptorService implements HttpInterceptor { 
    constructor(public toastr:ToastsManager) { 
    } 
    intercept(req:HttpRequest<any>, 
      next:HttpHandler):Observable<HttpEvent<any>> { 
    //Inspection removed for this file for rxjs. 
    //noinspection TypeScriptValidateTypes 
    return next.handle(req).do(evt => { 
     if (evt instanceof HttpResponse) { 
     this.toastr.success('You are awesome!', 'Success!'); 
     console.log('---> status:', evt.status); 
     // console.log('---> filter:', req.params.get('filter')); 
     } 
    }, err => { 
     if (err instanceof HttpErrorResponse) { 
     this.toastr.error('This is not good!', 'Oops!'); 
     //toastr here 
     } 
     console.log(err); 
    }); 

    } 
} 

そして、私のコンポーネントに私は私の@NgModule宣言でToastModule.forRoot()をimporintingした後、私のRootViewContainerRefを設定しています。それがうまくコンパイルし、私もコンソールでのサービスのconsole.log('---> status:', evt.status);ラインからログを参照してくださいが、どのtoastrが表示され表示されていないいくつかの理由

constructor(public toastr: ToastsManager, vRef: ViewContainerRef) { 
    this.toastr.setRootViewContainerRef(vRef); 
} 

。しかし、私はブラウザでコンポーネントを検査するときにトーストコンテナを見ることができます。私はここで何が欠けているのか分からない。どんなガイドも感謝します。実装で何が問題になっていますか？

Answer 1

こんにちはあなたInterceptorService自体が不要コンポーネントを追加する

constructor(public toastr: ToastsManager, vRef: ViewContainerRef) { 
     this.toastr.setRootViewContainerRef(vRef); 
} 

いけないが、この1 ToastModule.forRootを（行うのを忘れていない、このonedeclarationを追加）私の@NgModuleでは

Answer 2

を作業する必要がありますしかし、私はブラウザでコンポーネントを検査するときにトーストコンテナを見ることができます。

このトースターコンテナは、style = "display：none;" ？ 4.3.5から4.3.6までの角度から、何かがアニメーションで変更されたため、アニメーションにもいくつか問題があったため、コンポーネントがレンダリングされ、フェードインするはずですが、none：noneと表示されるように設定されています。

display：noneと表示される場合は、アニメーションに問題があることを意味します。

Answer 3

角度が4.1.1に更新され、アニメーションに関するいくつかの問題が修正されているようです。 4.1.1にアップデートし、まだ問題がないかどうかを確認してみましょう。

Answer 4

私は角で同じ問題がありました4.2

以下を追加してください。それは動作するはずです。

@import '../node_modules/ng2-toastr/ng2-toastr.css'; to ./src/app/theme/theme.cscc