有棱角的材料小吃条在服务吗

Question

我想处理http错误消息，并在服务中使用Angular material snackbar模块显示它们。我不想在组件中做所有这些重复的工作。我该怎么做？我得到以下错误：ERROR TypeError: this.openSnackBar is not a function。请注意，它在组件中运行良好。

private handleError(error: HttpErrorResponse) {
let message:string = "Something bad happened; please try again later."
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong.
if(error.status == 404){
this.openSnackBar('No data found!','Dismiss')
}
}
console.log(error)
// Return an observable with a user-facing error message.
return throwError(message);
}
openSnackBar(message: string, action: string) {
this._snackBar.open(message, action, {
duration: 2000,
});
}

Answer 1

MatSnackBar只是一项服务，因此您需要确保

1. 导入MatSnackBarModule

   import {MatSnackBarModule} from '@angular/material/snack-bar';

2. 注入MatSnackBar服务。

3. 如果您在服务中使用它，请确保使用可注入装饰器标记该服务。

示例

@Injectable({providedIn:'root'})
export class ErrorService { 
constructor(private _snackBar: MatSnackBar){ }
logError(message:string){
this._snackBar.open(message,'Dismiss')
}
} 

stackblitz演示

更新

看起来您将handleError作为函数引用传递，在这种情况下，this将引用其他对象，您会得到一个类似的错误

一个快速的解决方法是使用像这样的箭头功能

private handleError = (error: HttpErrorResponse) => {
....
}
openSnackBar(message: string, action: string) {
...
}