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

您可以使用本機類，即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%;
}

評論澄清后更新：

從文檔：

設置個別選項

success , error , info , warning take (message, title, ToastConfig) 傳遞一個選項 object 來替換任何默認選項。

例子：

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