要解决Angular 6错误处理不显示toasts的问题,你可以使用Angular中的Toastr库来显示错误消息。下面是一个示例解决方法:
首先,安装toastr库:
npm install toastr --save
然后,在你的Angular项目中的angular.json
文件中添加toastr的CSS和JS文件:
"styles": [
"node_modules/toastr/build/toastr.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/toastr/build/toastr.min.js"
]
接下来,在你的Angular组件中引入toastr库:
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-example',
template: ''
})
export class ExampleComponent {
constructor(private toastr: ToastrService) {}
showError() {
this.toastr.error('An error occurred', 'Error');
}
}
最后,在你的组件模板中添加一个用于显示toastr的元素:
现在,当你调用showError()
方法时,它将显示一个错误消息的toastr。
请注意,上述示例使用了ngx-toastr
库,该库是对toastr库的一个Angular封装。你可以根据自己的需要选择其他库或进行自定义修改。