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

Posted

技术标签:

【中文标题】ngx-toastr，Toast 未在 Angular 7 中显示【英文标题】：ngx-toastr, Toast not showing in Angular 7 【发布时间】：2019-05-28 02:29:37 【问题描述】：

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

我在项目的 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'
    )
   ]
...

我不知道我做错了什么，有没有人有类似的经历？非常感谢！

【问题讨论】：

希望这个答案能帮助***.com/questions/52940941/… 非常感谢您的回答，我已经走得更远了。现在 toast 已正确呈现，但仍仅在您将鼠标悬停在其上时才会显示。 这可能是因为您的自定义 css。如果有帮助，请为答案投票 我通过添加 @import '~ngx-toastr/toastr.css' 来修复它；进入 style.css 【参考方案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 属性。

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

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

#toast-container > div 
    opacity:1;

这里是有效的堆栈闪电战：https://stackblitz.com/edit/angular-gjazzq

【讨论】：

非常感谢您抽出宝贵的时间。我查看了所有模板，没有发现任何错误。即使像我在最初的帖子中写的那样使用最小的组件，我也没有成功。我也确定它与我的 css 或 scss 文件无关，因为我只有少数样式似乎与问题无关。它是否可能与我使用的其他库有关，例如引导程序？ boostrap 和 ngx-toastr 中的 .toastr CSS 类存在命名冲突。请参阅：'getbootstrap.com/docs/4.2/components/toasts'。另请注意我更新的答案。如果能充分解决问题，请标记为正确。 非常感谢您促成了这笔交易，现在一切正常！ 请注意，对于positionClass: 'toast-top-full-width'，虽然它做得不是很好...... @dstj 以什么方式？在该配置中，不透明度保持不变。 OP 的具体问题是不透明度。有不同的问题吗？【参考方案2】：

当我读到这个帖子时，我想你可以解决你的问题。但是，除非有人可能和我们一样，否则我会将问题的解决方案留在这里。

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

【讨论】：

您的解决方案对我有用，我还应该补充一点，您不需要将样式添加到 angular.json。一旦你的全局 styles.scss 导入 toastr css 库，一切都应该正常工作。 为我工作。为我节省了几个小时！ 这是对我有用的答案。谢谢！ 非常感谢。它拯救了我的一天。【参考方案3】：

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

添加此GitHub post 中提到的附加 css 后，toast 工作正常。

上述帖子的相关代码如下：

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

【讨论】：

在最新版本中更像是“toasty-type-error...”【参考方案4】：

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

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

我自己确实保留了“旧”的 4.1.3 引导程序，并将密切关注下一个 ng-bootstrap 版本，这样我就不会破解 css :)

#toast-container > div 
  opacity:1;

【讨论】：

不透明度 1 技巧有效，但我的吐司的背景颜色是白色的。要解决这个问题，你可以使用这个额外的 CSS： .toast-error background-color: #BD362F !important; .toast-success 背景颜色：#51A351 !important; 没错，这确实没什么大不了，但我经常忘记这样的修复，这就是为什么我不喜欢:)【参考方案5】：

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

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

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

【讨论】：

【参考方案6】：

Keenan Diggs' answers 的替代方法是在 ToastrModule 定义中提供一个额外的样式类，它将不透明度设置为 1。IMO 这更清楚我们在这里试图实现的目标，也不必依赖 #吐司容器。

app.module.ts:

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

不要忘记原来的 toast 类。

您的 (s)css 文件：

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

【讨论】：

你能帮我解决我的问题吗【参考方案7】：

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

中简单地导入 ngx-toastr 的样式 覆盖了那个 CSS

styles.scss

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

【讨论】：

【参考方案8】：

你需要导入

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

【讨论】：

帮我修好了【参考方案9】：

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

【讨论】：

【参考方案10】：

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

.toast-successbackground-color:#51A351!important;
.toast-errorbackground-color:#BD362F!important;
.toast-infobackground-color:#2F96B4!important;
.toast-warningbackground-color:#F89406!important;

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

【讨论】：

【参考方案11】：

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

    "extractCss": false

【讨论】：

【参考方案12】：

检查依赖关系。

或

尝试修复 css 导入或

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

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

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

【讨论】：

【参考方案13】：

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

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

【讨论】：

【参考方案14】：

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

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

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

【讨论】：

【参考方案15】：

我已经导入 ~ngx-toastr/toastr.css 在我的 Angular 应用的 style.css 中 用过

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

【讨论】：

【参考方案16】：

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

它对我有用。

【讨论】：

以上是关于ngx-toastr，Toast 未在 Angular 7 中显示的主要内容，如果未能解决你的问题，请参考以下文章

Toast 消息未在模拟器像素 3a 中显示 [重复]

UWP Toast 消息未出现在 Windows 11 中

如何捕获toast消息

如何取消Toast

TOAST:不重复显示Toast

android Toast大全（五种情形）建立属于你自己的Toast