Angular 6 ERROR TypeError: Невозможно прочитать свойство 'navigate' из неопределенного

Question

В моем обработчике ошибок я пытаюсь перейти на другую страницу при обнаружении ошибки.

Я пытаюсь получить список элементов, если это не удается, я хочу перейти к "./error401". Я пытался сделать это так:

UserTablecomponent:

export class UserDataSource extends DataSource<any>{


  constructor(private authservice: AuthService) {
    super();
  }
  connect(): any {
    return this.authservice.GetInstallation();
  }

  disconnect() { }
}

этот вызов может быть немного странным. Что он делает, это звонит остальным посмотреть, какой у меня идентификатор на основе токена. затем использует идентификатор в следующем вызове

auth.service

  GetServiceProviderId(): Observable<Info> {
    return this.http.get<Info>(this.rooturl + 'info', { headers: this.reqHeader });
  }

  GetInstallation(): Observable<Installation[]> {
    return this.GetServiceProviderId().pipe(
      flatMap(info => {
        return this.http.get<Installation[]>
          (this.rooturl +
          "installation/?serviceproviderid=" +
          info.ServiceProviderId,
          { headers: this.reqHeader })
      }
    ), catchError(this.myerrorhandle.handleError))
  }
}

myerrorHandle

@Injectable({
  providedIn: 'root'
})
export class myerrorHandle {

  constructor(public router: Router) { }

  handleError(errorResponse: HttpErrorResponse) {
    switch (errorResponse.status) {
      case 401: {
        this.router.navigate(["./error401"])
        break;
      }
      default: {
        console.log("todo");
        break;
      }
    }
    return throwError('an error was thrown');
  }
}

и я хочу перейти к "./error401", но получить

errror ERROR TypeError: Невозможно прочитать свойство 'navigate' из неопределенного

Это полный журнал ошибок:

ОШИБКА TypeError: Невозможно прочитать свойство 'navigate' из неопределенного в CatchSubscriber.push ../ src / app / myerrorHandle.ts.myerrorHandle.handleError [как селектор] (myerrorHandle.ts: 18) на CatchSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operator / catchError.js.CatchSubscriber.error (catchError.js: 33) в MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error (Subscriber.js: 80) в MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error (Subscriber.js: 60) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error (Subscriber.js: 80) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error (Subscriber.js: 60) в FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error (Subscriber.js: 80) в FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error (Subscriber.js: 60) в MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js: 13) в InnerSubscriber.push ../ node_modules / rxjs / _esm5 / internal / InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js: 18)

Answer 1

как сказал @ user184994:

Измените catchError на catchError ((err) => this.myerrorhandle.handleError (err))) в противном случае (без стрелки функции) контекст этого теряется

Answer 2

Вам нужно использовать функции стрелок в вашем коде, чтобы иметь возможность использовать контекст класса this

catchError(() => this.myerrorhandle.handleError));