angular - 如何在 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 }
        ).

我也希望显示在第一行

Answer 1

您可以使用本机类，即 iE 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, warningtake (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 下查看更多信息。