ngx-toastr，在Angular 7中不显示Toast

bootstrap和ngx-toastr之类的外观都使用.toastr类，从而影响了toastr div上的opacity属性.此线程有一个可行的答案:设置烤面包机的不透明性? 答案是将不透明度强制为1.添加此自定义样式表:#toast-container > div { opacity:1;}这是有效的stackblitz: https://stackblitz.com/edit/angular-gjazzq I'm currently developing a web app using Angular 7. I wanted to include ngx-toastr to send notifications to users but it isn't working as expected. When I trigger a toast nothing happens, except for a box in the size of a toast is appearing in bottom right corner but only when hovered over by the coursor.Following an example of how I trigger the toastr function. Test is invoked by the click of a button. import {ToastrService} from 'ngx-toastr';@Component({ selector: 'app-action-controls', templateUrl: './action-controls.component.html', styleUrls: ['./action-controls.component.scss']})export class Notification implements OnInit { test(){ this.toast.success("I'm a toast!", "Success!"); } constructor(private toast: ToastrService) { }}I includet the library css files in the angular.json file in my project like this: ... "styles": [ "src/styles.scss", "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/ngx-toastr/toastr.css" ], ...And like this in my app.module.ts file:...import {BrowserAnimationsModule} from '@angular/platform-browser/animations';import {ToastrModule} from 'ngx-toastr';... imports: [ ... BrowserAnimationsModule, ToastrModule.forRoot({ timeOut: 1000, positionClass: 'toast-bottom-right' }) ]...I can't figure out what i'm doing wrong, has anyone had similar experiences? Many thanks in advance! 解决方案 I was able to make a minimal reproduction of your issue, and I don't see any problems:https://stackblitz.com/edit/angular-avciduIs it possible that you have some custom styles that conflict with the toastr.css styles, or a template that is malformed (an unclosed div, for example)?Are you using the latest version of ngx-toastr? (9.1.1 at the time of this post)What does your template look like?Update:The previous stackblitz now shows the replicated problem. Here is the link again: https://stackblitz.com/edit/angular-avciduLooks like both bootstrap and ngx-toastr use the .toastr class, affecting the opacity property on the toastr div.This thread has a workable answer: Setting toastr opacity?The answer therein is to force the opacity to 1. Add this your custom stylesheet:#toast-container > div { opacity:1;}And here's the working stackblitz: https://stackblitz.com/edit/angular-gjazzq 这篇关于ngx-toastr，在Angular 7中不显示Toast的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！