如何使用ngx-toastr在角5中改变每个用例的特定吐司的位置？

Question

我已经在ngx 烤面包的实际站点上阅读了这篇文章，以及关于堆栈溢出的其他帖子，但是我无法为我的工作案例找到明确的解决方案。

我正试图为特定的用例更改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中声明了constructor

constructor(private toastr: ToastrService) {}

我使用toastr的方式如下：

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

按照我的设置，所有的吐司都在'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

错误方法的第三个参数用于提供吐司信息的位置(除其他外)。

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

​

将此插入吐司功能中。

​

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

​