ngx-toaster 默认在错误的屏幕位置通知

Question

这就是问题所在它默认在上面显示通知，可能它受到 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.

Answer 1

在此处检查 bottom 的拼写。

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

这里可以忽略timeOut

Answer 2

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

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

适用于 Angular 9+

Answer 3

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

positionClass: "toastr-bottom-right"

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

positionClass: "toast-bottom-right"

ngx-toaster 默认在错误的屏幕位置通知

ngx-toaster is notifying in the wrong place of the screen by default

javascript

css

angular

angular10

toastr