ngx-toaster 默认在错误的屏幕位置通知
ngx-toaster is notifying in the wrong place of the screen by default
这就是问题所在
它默认在上面显示通知,可能它受到 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.
在此处检查 bottom 的拼写。
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
}),
这里可以忽略timeOut
或者考虑另一个提供者并直接在那里生成 toast 通知片段,游乐场:
https://costlydeveloper.github.io/ngx-awesome-popup/#/playground/toast-generator
适用于 Angular 9+
好吧,这很愚蠢,但答案是我拼错了我输入的配置:
positionClass: "toastr-bottom-right"
但它是没有“r”的“toast-bottom-right”
positionClass: "toast-bottom-right"
这就是问题所在
当我像这样配置模块导入中的位置时:
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.
在此处检查 bottom 的拼写。
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
}),
这里可以忽略timeOut
或者考虑另一个提供者并直接在那里生成 toast 通知片段,游乐场:
https://costlydeveloper.github.io/ngx-awesome-popup/#/playground/toast-generator
适用于 Angular 9+
好吧,这很愚蠢,但答案是我拼错了我输入的配置:
positionClass: "toastr-bottom-right"
但它是没有“r”的“toast-bottom-right”
positionClass: "toast-bottom-right"