使用enableHtml属性更改ngx-toastr默认样式。角度7

时间:2020-03-04 21:56:43

标签: css angular ngx-toastr

我正在使用Toastr显示消息,并且在解决方案中出现了URL附带的错误消息,因此我使用了来自Toastr的enableHtml属性来创建和<a元素并传递这样的网址:

if(!res){
        this.toastr.error('Revise los requisitos <a href=\"https://www.google.com\" target=\"_blank\">AQUI</a>',
        'title' , {
                 enableHtml: true,
                 closeButton: true,
                 timeOut: 10000
             });
      }

这很好,我想知道是否有办法更改链接的颜色和大小,以替换烤面包机的默认样式。我知道可以用自定义吐司来做,但这是我代码中唯一需要的部分,因此只为一条消息创建整个吐司是不值得的,这就是为什么我想知道是否使用enableHtml属性,我可以将新样式传递给链接或其他内容。

1 个答案:

答案 0 :(得分:1)

您可能可以通过css覆盖链接样式:

  1. 为您的链接定义一个类,例如“ toastr-link”

<a href=\"https://www.google.com\" target=\"_blank\" class=\"toastr-link\">AQUI</a>

  1. 在全局style.scss或style.css文件中,为该类(“ toastr-link”)定义替代的样式(例如,将字体颜色设置为绿色)
.toastr-link{
    color: green !important;
}

完整示例可在以下stackblitz链接中找到:

https://stackblitz.com/edit/angular-q8xewq

希望有帮助!