ngx-toastr 样式在 Angular 9 中不起作用

编程问答 2022-05-16

问题描述

我是 Angular 的初学者，我需要向预先存在的代码添加通知。我已经成功安装了 toastr 并且实际出现了通知 div，但就像 css 根本不起作用。

我在我的 scss 中使用这个：

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

这是我的 html：

<div id="mydiv">
    <div>
        my content
    </div>
    
    <div toastContainer></div>
</div>

当通知出现时，这大致是我的 html 上发生的情况：

<div id="mydiv">
    <div>
        my content
    </div>
</div>
<div>my toastr notification appear here</div>

问题是mydiv是全屏元素，所以通知隐藏在屏幕底部。我在检查元素时手动调整了 css，看来我的通知消息确实显示了，但 css 没有以某种方式工作，它没有任何样式，只有 mydiv 下方的纯文本。

不知何故，即使我把它放在里面，通知元素也会出现在 mydiv 之外。

我检查了浏览器上的 Sources 选项卡，node_modules/ngx-toastr/toastr.css 就在那里。不确定这是否意味着它已成功加载。

我的 Angular 9.1.12，ngx-toastr 12.1.0。

解决方法

您必须将样式文件添加到 angular.json 下的 styles

"styles": [
  "src/assets/styles/styles.scss","./node_modules/ngx-toastr/toastr.css"  // here
],
angularangularngx-toastr