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

Question

我是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/toast.css就在那里。但不确定这是否意味着它已成功加载。

我的Angular 9.1.12，ngx-toastr 12.1.0。

Answer 1

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

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