在Angular 2中,可以通过以下步骤解决Toastr在全局错误处理程序中不起作用的问题:
npm install toastr --save
app
文件夹中创建一个名为global-error-handler.ts
的文件,并添加以下代码:import { ErrorHandler, Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
constructor(private toastr: ToastrService) { }
handleError(error: any): void {
this.toastr.error('An error occurred', 'Error');
// 可以选择在控制台中输出错误信息
console.error(error);
}
}
app.module.ts
文件中提供全局错误处理程序。在providers
数组中添加以下代码:import { ErrorHandler } from '@angular/core';
import { GlobalErrorHandler } from './global-error-handler';
@NgModule({
providers: [
{ provide: ErrorHandler, useClass: GlobalErrorHandler }
]
})
export class AppModule { }
app.component.ts
文件中添加以下代码:import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private toastr: ToastrService) { }
showToast(): void {
this.toastr.success('Hello Toastr', 'Success');
}
}
这样,当发生全局错误时,Toastr将能够显示错误消息。同时,你也可以在任何组件中使用Toastr服务来显示其他消息。记得在模块中导入ToastrModule和BrowserAnimationsModule。