ngx-toastr，Angular 7中Toast未显示

Question

我目前正在使用Angular 7开发web应用程序。 我想包括ngx-toastr以向用户发送通知，但它的工作效果不如预期。 当我触发一个toast时，除了在右下角出现一个大小为toast的框（只有在鼠标悬停时才会出现），什么也没有发生。 以下是我如何触发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'
    })
   ]
...

我无法弄清楚我做错了什么，有人有类似的经历吗？

- Marvin W.

---

希望我的回答能够帮到你 https://stackoverflow.com/questions/52940941/unable-to-display-toast-message-in-angular-5 - Sajeetharan

非常感谢您的回答，我已经有了一些进展。现在toast已经正确地呈现出来了，但仍然只有在鼠标悬停在其上时才会显示。 - Marvin W.

这可能是因为您的自定义 CSS。如果有帮助，请点赞该答案。 - Sajeetharan

我通过在style.css中添加@import '~ngx-toastr/toastr.css';来修复了它。 - reverie_ss

Answer 1

我已经制作了一个最小化的问题复现，我没有看到任何问题：https://stackblitz.com/edit/angular-avcidu

你是否有一些自定义样式与toastr.css样式冲突，或者模板不完整（例如未关闭的 div）？

你正在使用最新版本的ngx-toastr吗？（本帖发布时为9.1.1）

你的模板是什么样子的？

更新：

之前的stackblitz现在展示了复制出的问题。这是链接: https://stackblitz.com/edit/angular-avcidu

看起来bootstrap和ngx-toastr都使用.toastr类，影响了toastr div上的opacity属性。

这个线程有一个可行的答案：设置toastr opacity？

其中的答案是强制将opacity设置为1。将以下内容添加到您的自定义样式表中：

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

这里是可以工作的StackBlitz链接：https://stackblitz.com/edit/angular-gjazzq

- Keenan Diggs

---

非常感谢您抽出时间。我查看了所有的模板，但没有发现任何错误。即使是像我在最初的帖子中编写的这样的最小组件，我也没有成功。 我也确定这与我的CSS或SCSS文件无关，因为我只有很少的样式似乎与问题无关。 可能与我使用的其他库有关，例如Bootstrap吗？ - Marvin W.

在boostrap和ngx-toastr中，.toastr CSS类的命名发生了冲突。请参阅：'getbootstrap.com/docs/4.2/components/toasts'。另外请注意我的更新答案。如果能解决问题，请标记为正确答案。 - Keenan Diggs

非常感谢，这解决了问题，现在它完美地工作了！ - Marvin W.

请注意，对于 positionClass: 'toast-top-full-width'，它的表现并不是很好... - dstj

@dstj 是什么问题呢？在那种配置下，不透明度保持不变。楼主的具体问题是不透明度。还有其他问题吗？ - Keenan Diggs

Answer 2

阅读这个线程时，我想您可能已经解决了问题。但是，除非其他人遇到与我们相同的问题，否则我将在此处留下解决方案。 我所做的解决方法是：在项目根目录下的 style.css 中添加 @import '~ ngx-toastr/toastr.css'; 将会解决该问题。

- Tung

---

你的解决方案对我很有用，我还应该补充一点，就是你不需要将样式添加到 angular.json 中。一旦你的全局 styles.scss 导入了 toastr 的 CSS 库，一切都应该正常工作。 - AllJs

Answer 3

即使我在全局style.scss中添加了上面答案中的不透明度css代码，它仍然没有完全解决我的问题； 我得到了一个空白的白色框。

在添加了GitHub帖子中提到的额外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;
}

- Pranav S

---

在最新版本中更像是“烤面包机类型错误”… - user7082181

Answer 4

在我的情况下，这是由于一些 CSS 冲突引起的。我通过在 styles.css 中简单地导入 ngx-toastr 的样式来覆盖了那个 CSS。

styles.scss

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

- Oliver

Answer 5

这与配备吐司的新bootstrap版本密切相关。这是一个讨论它的问题：https://github.com/ng-bootstrap/ng-bootstrap/issues/2945。我自己使用的是“旧”的4.1.3 bootstrap，并将关注下一个ng-bootstrap版本，这样我就不会对css进行修改 :)。

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

- Alain Boudard

---

不透明度1的技巧有效，但我的吐司的背景颜色是白色。为了解决这个问题，您可以使用以下额外的CSS：.toast-error { background-color: #BD362F !important; } .toast-success { background-color: #51A351 !important; } - Sefa

确实，这并不是什么大问题，但我经常会忘记这样的修复，所以我宁愿不这样做 :) - Alain Boudard

Answer 6

我知道这个问题已经3个月了，但是要告诉大家最新的改变。ngx-toastr v10.0.2不再存在与bootstrap v4.2.1一起使用时会出现的错误。

因此，更新您的ngx-toastr应该可以解决此问题。对我有用 :)

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

- James

Answer 7

提供另一个选择Keenan Diggs的答案，就是在ToastrModule定义中提供一个附加的样式类，将不透明度设置为1。在我看来，这更清晰地表达了我们在尝试实现什么，而且也不必依赖于#toast-container。

app.module.ts:

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

不要忘记原始的 toast 类。

你的（s）css文件：

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

- Pieter De Bie

---

你能帮我解决我的问题吗？ - user11314257

Answer 8

如果您仍在寻找一种简单的解决方案，我刚刚将以下行添加到全局styles.css中：

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

它起作用了。

- Allie Moosa

Answer 9

最初的回答：我遇到了这个问题，并且注意到它在工作，但没有正确呈现CSS，所以我检查了node_modules/toastr文件夹，发现了其他CSS文件，请尝试包含所有CSS文件，因为这对我有效。

请在您的angular.json文件中添加CSS文件，然后尝试重新运行应用程序。

 "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"
       ],

- Ande Caleb

Answer 10

您需要导入

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

- Buzzzzzzz

---

已经为我修复了。 - Stevanicus