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

Question

我目前正在使用 Angular 7 开发网络应用程序。我想包含 ngx-toastr 以向用户发送通知，但它没有按预期工作。当我触发吐司时，什么也没有发生，除了一个吐司大小的框出现在右下角，但只有当鼠标悬停在上面时才会出现。以下是我如何触发 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) { }
}

我将库 css 文件包含在我项目的 angular.json 文件中，如下所示：

     ...        
     "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 post）

您的模板是什么样的？

更新：

之前的 stackblitz 现在显示了重复的问题。这里又是 link：https://stackblitz.com/edit/angular-avcidu

看起来 bootstrap 和 ngx-toastr 都使用 .toastr class，影响 toastr div 上的不透明度属性。

这个帖子有一个可行的答案：Setting toastr opacity?

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

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

下面是正在运行的 stackblitz：https://stackblitz.com/edit/angular-gjazzq

Answer 2

这与 Toasts 附带的新 bootstrap 版本密切相关。这是一个讨论它的问题：

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

我自己确实保留了 "old" 4.1.3 bootstrap，并将关注下一个 ng-bootstrap 版本，这样我就不会破解 css :)

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

Answer 3

的替代方法是在 ToastrModule 定义中提供一种额外的样式 class，它将不透明度设置为 1。IMO 这更清楚了我们在这里和也试图实现的目标不必依赖#toast-container。

app.module.ts:

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

勿忘原toast class.

您的css 文件：

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

Answer 4

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

添加 GitHub post 中提到的额外 css 后，toasts 工作正常。

上面post的相关代码如下：

/* 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 5

我知道这个问题已经有 3 个月了，但只是为了通知大家最新的变化。 ngx-toastr v10.0.2 在 bootstrap v4.2.1

中不再有这个错误

所以更新你的 ngx-toastr 应该可以解决这个问题。它对我有用:)

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

Answer 6

当我读到这个帖子时，我猜你可以解决你的问题。但是，我会把我的问题的解决方案留在这里，除非有人和我们有相同的答案。

我解决问题的方法是：将@import '~ngx-toastr/toastr.css';添加到项目根目录下的style.css中即可解决问题。

Answer 7

我遇到了这个问题，我注意到它在工作但没有正确渲染 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 8

我又遇到这个问题了。上面的资源说它是固定的但不适合我。即使获得了 bootstrap 和 toastr 的最新资源。经过大量调查后，我发现只需将“！重要”添加到相关的 toastr 警报类型背景即可为我解决此问题。请参阅下面的代码。

.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 9

对我来说，这些解决方案都没有帮助。我最后所做的是在生产配置的 Angular.json 中进行设置：

    "extractCss": false

Answer 10

您需要导入

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

并在 @NgModule imports

下添加

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

Answer 11

检查依赖关系。

或

尝试修复 css 导入或

您可以从这里 toastr.css 复制 css 并将其粘贴到您的全局 css 或

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

angular.json -> 样式：[..., "your/style/path/toastr.css"]

Answer 12

对于 Angular - Material 或任何 angular 项目，我们应该需要按顺序导入模块在你的 app.module.ts 中像这样：

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

Answer 13

就我而言，我解决问题的方法是：添加

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

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

Answer 14

我已经导入了 ~ngx-toastr/toastr.css 在我的 style.css 的 angular 应用中使用

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

Answer 15

就我而言，这是由于某些CSS之间的冲突。我通过简单地 在 styles.css

中导入 ngx-toastr 的样式来覆盖 CSS

styles.scss

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

Answer 16

我已经导入了 ~ngx-toastr/toastr.css 但它没有用。因此，我复制了上述文件中的所有 CSS 并将其粘贴到我的 styles.css.

对我有用。

Answer 17

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

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

成功了

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

ngx-toastr, Toast not showing in Angular 7

toastr

angular

更新：