如何在 Angular 5 中使用 ngx-toastr 更改每个用例的特定 toast 的位置

Question

我一直在 ngx-toastr ngx-toastr 的实际站点和 Stack Overflow 上的其他帖子上阅读此内容，但找不到适合我的工作案例的明确解决方案。

我正在尝试针对特定用例更改 toastr 的位置。例子;当出错时，在顶部显示toastr。

我有一个非常普通的设置。

在我的 app.module.ts 中，我有以下内容：

import { ToastrModule } from 'ngx-toastr';

在我的 app.module.ts 导入中，我有：

imports: [
    BrowserModule,
    ToastrModule.forRoot({
      timeOut: 3500,
      positionClass: 'toast-bottom-center',
      preventDuplicates: true,
}),

在我的组件中，我在 constructor:

中声明了 toastr

constructor(private toastr: ToastrService) {}

而我使用 toastr 如下：

this.toastr.error('There was an error loading the Asset List!', 'Asset Register');

根据我的设置，所有 toast 都显示在 'toast-bottom-center' 中。如何修改此调用以在顶部显示吐司？

this.toastr.error('There was an error loading the Asset List!', 'Asset Register');

Answer 1

为此提供服务。

首先创建一个枚举

export enum ToasterPosition {
  topRight = 'toast-top-right',
  topLeft = 'toast-top-left',
  bottomRight = 'toast-bottom-right',
  bottomLeft= 'toast-bottom-left',
  // Other positions you would like
}

现在创建您的服务

export class ToasterService {
  constructor(private toastr: ToastrService) {}

  public error(title: string, message: string, positionClass: ToasterPosition) {
    this.toastr.error(message, title, { positionClass });
  }
}

这样，您就不会错过定位，因为您必须提供一个枚举。

Answer 2

error 方法的第三个参数用于提供 toastr 消息的位置（除其他外）。

this.toastrService.error('There was an error loading the Asset List!', 'Asset Register');

this.toastrService.warning('Some warning message', 'some title', {
   positionClass: 'toast-bottom-right' 
});

Answer 3

将此添加到 style.css

.toast-top-center {
  bottom: 0;
  margin: 0 auto;
  right: 0;
  left: 0;
  width: 100%;
}

将这个插入到你的 toast 函数中

show(config: { type: string, title: string, subTitle?: string }): void {
  switch (config.type) {
        case 'Success':
          this._toastr.success(config.subTitle ? config.subTitle : '', config.title,{ positionClass: 'toast-top-center'});
          break;
        case 'Error':
          this._toastr.error(config.subTitle ? config.subTitle : '', config.title, { positionClass: 'toast-top-center'});
          break;
        case 'Warning':
          this._toastr.warning(config.subTitle ? config.subTitle : '', config.title, { positionClass: 'toast-top-center'});
          break;
        case 'Info':
          this._toastr.info(config.subTitle ? config.subTitle : '', config.title, { positionClass: 'toast-top-center'});
          break;
        default:
          break;
      }
}

如何在 Angular 5 中使用 ngx-toastr 更改每个用例的特定 toast 的位置

How can I change the position of a specific toast per use case using ngx-toastr in Angular 5

javascript

toastr

angular-material

angular