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

标签 javascript angular angular-material toastr

我一直在 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 都显示在 'toast-bottom-center' .如何修改此调用以在顶部显示 toast ?
this.toastr.error('There was an error loading the Asset List!', 'Asset Register');

最佳答案

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

关于javascript - 如何在 Angular 5 中使用 ngx-toastr 更改每个用例的特定 toast 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49357790/

相关文章:

javascript - 无法使用 Azure AD 和 SPA 获取 token

html - 如何在 Angular 中使用带有 FormControl 的 Angular Material Slider?

angular - Datepicker Angular Material Outline 表单,将标题放在顶部

javascript - 在 Protractor 中测试 Material 设计元素

javascript - Angular Material dialogRef.afterClosed().subscribe 无法处理错误

javascript - 保存 `EditText`可见性的状态

javascript - 如何限制 highstock.js 中导航器的大小?

javascript - Angularjs $http 不按 promise 返回对象

javascript - 将本地存储变量名称设置为变量的值

angular - 每次模型以 Angular 2 变化时如何调用函数?