ngx-toastr，在Angular 7中不显示Toast [英] ngx-toastr, Toast not showing in Angular 7

问题描述

我目前正在使用Angular 7开发一个Web应用程序.我想包含ngx-toastr来向用户发送通知，但它无法正常工作.当我触发烤面包片时，什么都没有发生，只是在右下角出现了一个烤面包片大小的框，但只有当光标被光标悬停时才出现. 以下是我如何触发烤面包机功能的示例.单击按钮即可调用测试.

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) { }
}

我在我的项目中的angular.json文件中包括库css文件，如下所示:

     ...        
     "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/scss/bootstrap.scss",
        "node_modules/ngx-toastr/toastr.css"
      ],
      ...

在我的app.module.ts文件中是这样的:

...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
  imports: [
    ...
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right'
    })
   ]
...

我不知道自己在做错什么，有人经历过类似的经历吗?提前非常感谢！

解决方案

我能够对您的问题进行最小程度的重现，但看不到任何问题: https://stackblitz.com/edit/angular-avcidu

是否可能有一些与toastr.css样式冲突的自定义样式，或者模板格式错误(例如，未封闭的div)?

您是否正在使用最新版本的ngx-toastr? (在撰写本文时为9.1.1)

您的模板是什么样的?

更新:

以前的堆栈闪电现在显示了已复制的问题.再次是链接: https://stackblitz.com/edit/angular-avcidu

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-avcidu

Is 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-avcidu

Looks 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！