更新：

Question

我目前正在使用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'
    })
   ]
...

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

Answer 1

我能够对您的问题进行最小程度的再现，但我没有发现任何问题： 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属性。

此线程有一个可行的答案：Setting toastr opacity?

答案是将不透明度强制为1。添加您的自定义样式表：

#toast-container > div {
    opacity:1;
}

这是工作中的闪电战：https://stackblitz.com/edit/angular-gjazzq

Answer 2

这与Toasts随附的新引导程序版本密切相关。这是一个讨论它的问题：

https://github.com/ng-bootstrap/ng-bootstrap/issues/2945

我本人确实保留了“旧的” 4.1.3引导程序，并会密切关注下一个ng-bootstrap版本，这样我就不会破解CSS了：）

#toast-container > div {
  opacity:1;
}

Answer 3

即使在我的global style.scss中添加了以上答案中的不透明CSS代码之后，它也不能完全解决我的问题；我得到一个空白的白框。

添加了GitHub post中提到的其他CSS之后，这些吐司就可以正常工作。

以上帖子中的相关代码如下：

/* TOASTR BUGFIX */
#toast-container > div {
  opacity: 1;
}
.toast {
  font-size: initial !important;
  border: initial !important;
  backdrop-filter: blur(0) !important;
}
.toast-success {
  background-color: #51A351 !important;
}
.toast-error {
  background-color: #BD362F !important;
}
.toast-info {
  background-color: #2F96B4 !important;
}
.toast-warning {
  background-color: #F89406 !important;
}

Answer 4

我知道这个问题已经3个月了，但只是想通知所有人最新的变化。 ngx-toastr v10.0.2在Bootstrap v4.2.1中不再存在此错误

因此更新ngx-toastr应该可以解决此问题。它对我有用：）

https://github.com/scttcper/ngx-toastr/releases

Answer 5

Keenan Diggs' answers的替代方法是在ToastrModule定义中提供一个附加的样式类，该类将opacity设置为1。IMO这一点更加清楚了我们在此处要实现的目标，并且也不必依赖在＃toast-container上。

app.module.ts：

ToastrModule.forRoot({
  toastClass: 'toast toast-bootstrap-compatibility-fix'
}),

别忘了原来的toast类。

您的（s）css文件：

.toast-bootstrap-compatibility-fix {
  opacity:1;
}

Answer 6

在我的情况下，这是由于某些CSS之间的冲突引起的。我通过在<{1}}

中简单地导入ngx-toastr样式来重写CSS。

styles.scss

@import'〜ngx-toastr / toastr.css';

Answer 7

当我阅读此主题时，我想您可以解决您的问题。但是，除非有人可能和我们一样，否则我将在这里留下解决问题的方法。

我为解决此问题所做的工作是：将> python3 test.py 1 3 2 6 5 4 10 9 8 7 15 14 13 12 11 21 20 19 18 17 16 28 27 26 25 24 23 22 36 35 34 33 32 31 30 29 >添加到项目根目录下的@import '~ngx-toastr/toastr.css';中将解决此问题。

Answer 8

我遇到了这个问题，我注意到它可以正常工作，但是没有正确呈现CSS，因此我检查了node_modules / toastr文件夹，意识到还有其他CSS文件，请尝试包括所有css文件，因为这对我。

在您的angular.json文件中添加css文件，然后尝试再次运行yoru应用程序。

 "styles": [              
          "./src/assets/css/bootstrap.min.css",
          "......",              
          "./node_modules/ngx-toastr/toastr.css",
          "./node_modules/ngx-toastr/toastr-old.css",
          "./src/styles.css",
          ".......",
          "......",
          "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
       ],

Answer 9

我再次遇到了这个问题。上面的资源说它是固定的，但对我来说不是。即使在获取了Bootstrap和Toastr的最新资源之后。经过大量调查，我发现只需在相关的烤面包机警报类型背景中添加“！important”就可以解决此问题。参见下面的代码。

.toast-success{background-color:#51A351!important;}
.toast-error{background-color:#BD362F!important;}
.toast-info{background-color:#2F96B4!important;}
.toast-warning{background-color:#F89406!important;}

尽管不是很好的做法，但我在.min.css文件中添加了代码。但是，我们确实将这些文件托管在我们的AWS CloudFront CDN中，并且不需要重复的CDN。

Answer 10

对我来说，这些解决方案都无济于事。最后，我要做的是在Angular.json中为生产配置进行设置：

    "extractCss": false

Answer 11

您需要导入

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

并将其添加到@NgModule导入下

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
   ......
  ],
  imports: [
     ......
    BrowserAnimationsModule,
    ToastrModule.forRoot({ timeOut: 2000 enableHtml: true }),
  ],
  providers: [
    ToastService,
     ......
  ],
  bootstrap: [AppComponent]
})

Answer 12

检查依赖性。

OR

尝试修复css导入或

您可以从此处toastr.css复制CSS，并将其粘贴到全局CSS或

中

创建一个新的CSS文件，并将该文件路径添加到

angular.json->样式：[...，“您的/样式/路径/toastr.css”]

Answer 13

对于Angular-材料或任何角度项目，我们应该需要按顺序导入模块在您的app.module.ts中是这样的：

imports: [
 BrowserModule,
 BrowserAnimationsModule,
 ToastrModule.forRoot({
    timeOut: 3000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
    closeButton: true
 })
]

Answer 14

对于我来说，我要解决的问题是：通过添加

 @import '~ngx-toastr/toastr.css';

进入style.css-角度应用程序的根文件夹中的主要样式

Answer 15

我已经导入了 ~ngx-toastr/toastr.css 但它不起作用。所以，我复制了上述文件中的所有 CSS 并将其粘贴到我的 style.css 中。

它对我有用。

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

15 个答案:

更新：