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

Question

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

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

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

我希望 displayed 也出现在第一行

Answer 1

您可以使用本机类，即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, 
    'close-button':false, 
    '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','',
          { enableHtml: true,
            position-class:'my-own-toastr-class' 
          }
        ).

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