ng2-toastr 在 Angular 4.3.6 服务中调用时未应用正确的 css答案

【问题标题】：ng2-toastr not applying proper css when invoked in Angular 4.3.6 serviceng2-toastr 在 Angular 4.3.6 服务中调用时未应用正确的 css
【发布时间】：2017-10-30 11:41:45
【问题描述】：

我正在尝试在我的应用程序中实现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() 之后，我正在设置我的 RootViewContainerRef。

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

由于某种原因，它编译得很好，我还在控制台中看到了来自console.log('---> status:', evt.status); 服务行的日志，但没有看到任何 toastr 显示。但是，当我在浏览器中检查组件时，我可以看到 toast 容器。我不知道我在这里错过了什么。任何指南将不胜感激。我的实施有什么问题？

【问题讨论】：

标签： javascript angular typescript npm angular-services

【解决方案1】：

Angular 已更新到 4.1.1，并且似乎修复了一些动画问题。让我们尝试更新到 4.1.1，看看是否还有问题。

【讨论】：

【解决方案2】：

你好你的InterceptorService自己添加这个声明，不需要添加组件

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

别忘了在我的@NgModule 中执行此操作ToastModule.forRoot()它一定可以工作

【讨论】：

您不能将ViewContainerRef 添加到服务中，因为服务本质上是单例的。stackoverflow.com/questions/40636840/…

【解决方案3】：

但是，当我在浏览器中检查组件时，我可以看到 toast 容器。

那个烤面包机容器有没有 style="display: none;" ?因为从 Angular 4.3.5 到 4.3.6 动画发生了一些变化，我也面临一些动画问题，组件被渲染并且应该淡入，但它被设置为 display: none。

如果您将看到 display: none，则表示动画有问题。

【讨论】：

并非如此。我看到了没有任何风格的共同点。

【解决方案4】：

我在 Angular 4.2 中遇到了同样的问题

尝试添加以下内容。它应该工作..

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

【讨论】：