如何调整 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

您可以使用本机 classes，即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 应用自定义 class 并在 CSS.

中定义 class

 <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%;
}

更新在评论澄清后：

来自文档：

Setting Individual Options

success, error, info, warning take (message, title, ToastConfig) pass an options object to replace any default option.

示例：

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' 
          }
        ).

或自定义 class:

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 的选项下查看更多信息。

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

How to adjust the width of the toastr message in Angular

angular

angular9

toastr

angular-toastr

ngx-toastr