У меня есть обработка ошибок на уровне обслуживания для моих запросов API. Это прекрасно работает, за исключением того, что я хочу иметь возможность уведомлять пользователей о том, что что-то пошло не так в пользовательском интерфейсе, кроме сообщений консоли. Я подумал, что Material Snackbars отлично подойдет для этого.
После некоторых исследований оказалось, что Angular HttpClient работает за пределами зоны, поэтому я обернул свой метод snackbar.open() таким образом, чтобы решить проблему:
//POST METHOD
///////////////////////////////////////////////////////////////////////////
addNewCategory(category: CreateCategory): Observable<CreateCategory> {
return this.http
.post<CreateCategory>(this.url + "/create", category)
.pipe(catchError(this.handleError));
}
//ERROR HANDLING METHOD
///////////////////////////////////////////////////////////////////////////
private handleError(errorResponse: HttpErrorResponse) {
if (errorResponse.error instanceof ErrorEvent) {
console.log("Client Side Error: ", errorResponse.error.message);
} else {
console.log("Server Side Error: ", errorResponse);
this.openSnackbar("Category Not Added.");
}
return throwError("There is an issue with the call.);
}
//SNACK BAR METHOD
///////////////////////////////////////////////////////////////////////////
openSnackbar(snackMessage: string) {
this.zone.run(() => {
this._snackBar.open(snackMessage, "Close", {
duration: 7000
});
});
}
К сожалению, это по-прежнему дает те же результаты. Предположительно, приведенное выше исправление действительно работало в какой-то момент, см. на">здесь.
Я также пытался выполнить обработку ошибок в компоненте, что, насколько я понимаю, является неправильной практикой, но я все равно получил те же результаты даже с исправлением зоны. Вот сообщение об ошибке, которое я получаю в консоли, когда закусочная пытается запуститься:
core.js:1673 ERROR TypeError: this.openSnackbar is not a function
at CatchSubscriber.push../src/app/services/people-category.service.ts.PeopleCategoryService.handleError [as selector] (people-category.service.ts:93)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
Любое понимание будет оценено! Спасибо!
.pipe(catchError(this.handleError.bind(this)));
или определите обратный вызов как функцию стрелки:private handleError = (errorResponse: HttpErrorResponse) => { ... }
. - person ConnorsFan   schedule 20.10.2018