为什么Angular Error句柄不会从服务中引发错误

Question

我已经实现了一种方法，可以在对api的服务调用中出现任何错误时处理错误。 在代码中，我将对错误处理程序的引用传递给Rxjs catchError运算符，如下所示：

GetUserByUserID(id: number): Observable<UserDetails> {
  const url = `${this.baseUrl}/${this.userByID}/${id}`;

  return this.http.get<UserDetails>(url, this.httpOptions)
    .pipe(
      catchError(this.handleError)
    );
  }

ErrorHandler：

import { Observable, throwError as observableThrowError } from 'rxjs';

private handleError(error: HttpErrorResponse) {
  console.log(error);
  if (error.status === 400) {
    return observableThrowError(new BadRequestError(error.error));
  }

  if (error.status === 404) {
    return observableThrowError(new NotFoundError());
  }

  if (error.status === 401) {
    return observableThrowError(new UnAuthorizedError(error));
  }

  if (error.status === 403) {
    return observableThrowError(new ForbiddenError(error));
  }

  return observableThrowError(new AppError(error));
}

在此错误处理程序方法中，我返回一个Observable，其中包含特定于我的应用程序域（错误域）的错误，我创建了不同的错误类，因此我只是检查该错误是否是我的错误域之一的实例我订阅Observable时的类。

this.router.data
  .subscribe(response => {
    this.UserDetail = response.userDetail;
    console.log(this.UserDetail);
  }, (error: AppError) => {
    if (error instanceof BadRequestError) {
      this.notifierService.notify('error', 'lease Register to login');
    } else {
      this.notifierService.notify('error', 'Something went worng... Please try again in few minutes');
    }
  }
});

具有所有这些位置来处理错误，即返回特定于我的应用程序的错误的Observable并最终检查它是否是我的错误域之一的实例，当订阅实际上似乎没有起作用时，我不断控制台中的错误：