如何在Angular中调整toastr消息的宽度

问题描述

我有使用 npm 中的 ngx-toastr 的 toastr 消息通知（我当前的堆栈是 Angular 9）

有没有办法改变消息的最大宽度，因为它会导致消息文本换行。

this.toastrService.error(
          'This is an error message to be displayed<br> please log back','',{ enableHtml: true }
        ).

我希望 displayed 也出现在第一行

解决方法

您可以使用本机类，即toast-top-full-width 或 toast-bottom-full-width

 <toaster-container toaster-options="{
   'time-out': 2500,'close-button':false,'position-class':'toast-bottom-full-width'
  }"></toaster-container>

作为替代方案，您还可以通过 position-class 应用您的自定义类并在您的 CSS 中定义该类。

 <toaster-container toaster-options="{
    'time-out': 2500,'position-class':'my-own-toastr-class'
  }"></toaster-container>

CSS：

.my-own-toastr-class {
   width: 100%;
}

更新在评论澄清后：

来自文档：

设置个人选项

success,error,info,warning take (message,title,ToastConfig) 传递一个选项对象来替换任何默认选项。

示例：

this.toastrService.error('everything is broken','Major Error',{
  timeOut: 3000,});

例如，在您的情况下，这将是：

this.toastrService.error(
          'This is an error message to be displayed<br> please log back','',{ enableHtml: true,position-class:'toast-bottom-full-width' 
          }
        ).

或者使用您自己的自定义类：

this.toastrService.error(
          'This is an error message to be displayed<br> please log back',position-class:'my-own-toastr-class' 
          }
        ).

请在 https://www.npmjs.com/package/ngx-toastr 的 OPTIONS 下查看更多信息。