默认情况下，ngx-toaster 在屏幕的错误位置进行通知

如何解决默认情况下，ngx-toaster 在屏幕的错误位置进行通知

这就是问题所在

它默认在上面显示通知，也许它受到 CSS 属性的影响？？

当我像这样在模块的导入中配置位置时：

imports: [
  ...
  ...,ToastrModule.forRoot(
   positionClass: 'toastr-bottom-right'
  )
]

好吧，当我这样做时，它会将通知放在左上角，除此之外没有显示任何消息，正如您在屏幕截图中看到的那样，它只是一个红色（错误）toastr 通知但为空，即使我确实向它传递了一条消息，以在用户未正确登录时进行通知。

这是我的 AppModule：

这是我的组件代码

export class NavComponent  {

  ...
  ...
  ...
  model: any = {};
  loggedIn: boolean;

  constructor(
    private accountService: AccountService,private router: Router,private toastr: ToastrService
    ) { }
  ...
  ...
  login(){
      this.accountService.login(this.model).subscribe(response => {
        this.router.navigateByUrl('/agents');
      },errorResponse => {
        console.log(errorResponse);
        this.toastr.error(errorResponse.eror);
      });
  }

我使用的是 Angular 10。

解决方法

在这里检查底部的拼写。

ToastrModule.forRoot({
    timeOut: 10000,positionClass: 'toast-bottom-right',}),

您可以在此处忽略 timeOut。

,

或者考虑另一个提供者并直接在那里生成 toast 通知片段，playground：

https://costlydeveloper.github.io/ngx-awesome-popup/#/playground/toast-generator

适用于 Angular 9+

,

好吧，这很愚蠢，但答案是我拼错了我放置的配置：

positionClass: "toastr-bottom-right"

但它是没有“r”的“toast-bottom-right”

positionClass: "toast-bottom-right"