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()后设置了我的 RootViewContainerRef。

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

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

Answer 1

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

Answer 2

嗨你的拦截器服务本身添加这个声明，不需要添加组件

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

不要忘记在我的@NgModule中做这个 ToastModule.forRoot()它必须工作

Answer 3

但是

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

那个烤面包机容器有 style="display： none;" 吗？因为从角度 4.3.5 到 4.3.6 动画发生了一些变化，我也遇到了一些动画问题，组件被渲染并且应该淡入，但它设置为显示：无。

如果您看到显示：无，则表示动画有问题。

Answer 4

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

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

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