Typescript:在类中调用静态方法(Angular HttpInterceptor)

Question

我目前正在研究一个直到昨天都运行良好的http拦截器。

它定义了静态方法，其中一个方法不想被识别。

控制台说：

my.component.ts：162 PUT 请求类型错误中的错误：HttpInterceptorService_1.httpInterceptorService.createHttpErrorMessage 不是函数

at TapSubscriber._tapNext (http-interceptor.service.ts:113)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._next (tap.js:45)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next (take.js:40)
at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Notification.push../node_modules/rxjs/_esm5/internal/Notification.js.Notification.observe (Notification.js:15)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/operators/delay.js.DelaySubscriber.dispatch [as work] (delay.js:42)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction._execute (AsyncAction.js:63)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction.execute (AsyncAction.js:51)
at AsyncScheduler.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js.AsyncScheduler.flush (AsyncScheduler.js:43)

我的拦截器看起来像这样(我已将其简化为对错误感兴趣的部分(：

// My imports
@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
  // Other static stuff and below my httpInterceptorService
  static httpInterceptorService: HttpInterceptorService;
  constructor(
    httpInterceptorService: HttpInterceptorService,
  ) {
    HttpInterceptorService.httpInterceptorService = httpInterceptorService;;
  }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headers = new HttpHeaders({
      // Some headers
    });
    const clone = req.clone({
      // ..
    });
    return next.handle(clone).pipe(
      // ..
    );
  }
  createHttpErrorMessage(error: HttpErrorResponse, statusText: string) {
    const msg: string = error.status + ' ' + error.statusText + ' - ' + statusText;
    switch (error.status) {
      case 404:
        this.showError('Error ID: ' + this.id, msg);
        break;
      default:
        break;
    }
    console.error(
      // Some error messages
    );
  }
  handleHttpError(error: HttpErrorResponse) {
    if (my condition) {
      // some logic
    } else {
      return throwError(error).pipe(
        retryWhen(errors => errors.pipe(
          delay(1000),
          take(1),
          tap(() => {
            switch (error.status) {
              case 404: // This method is not recognized anymore.. 
                HttpInterceptorService.httpInterceptorService.createHttpErrorMessage(
                  error, HttpInterceptorService.otherService.doSomething());
                break;
              default:
                console.error(error);
                break;
              }
            }),
          ),
        )
      );
    }
  }
}

正如我所说，到目前为止，拦截器一直没有任何问题，直到昨天出现此错误。

我做错了什么？

Answer 1

您可以进行以下更改之一以修复编译问题。

• 使用 调用它

  this.createHttpErrorMessage(...)
  

或

• 使该方法静态并使用

  HttpInterceptorService.createHttpErrorMessage(...)