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,
}),

在我的组件中，我在toastr：

中声明了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

error 方法的第3个参数用于提供烤面包机消息的位置（除其他外）。

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

希望对您有帮助。

如何在Angular 5

2 个答案: