свойство навигации по неопределенным

Question

AppService

constructor(private httpClient: HttpClient, 
              private router: Router
              ) { }

user(): Observable<any> {
   return this.httpClient.get<any>('/users/details')
     .pipe(
       catchError(this.handleError)
     );
}


private handleError(error: HttpErrorResponse){
    console.log('handleError' , error);
    if (error.error instanceof ErrorEvent) {
      // A client-side error....
    } else {
      // The backend error...
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}` +
        `  ${error.message}`
      );

      this.router.navigate(['/errors']);//READ HERE!!!!!
    }
    
  }

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    UsersComponent,
    ErrorComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [
    AppService, 
    { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true } 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Возможная проблема: this относится к неверному контексту ?

Answer 1

Чтобы проверить правильность контекста и проверить, предоставляется ли переменная router для вашего компонента, попробуйте напечатать this.

console.log(this)

.аналогично

MyComponent {..., router: Router, ...}, если маршрутизатору предоставлен компонент

Answer 2

Звонящий на handleError является Observable, контекст не является экземпляром вашего контроллера.Вам необходимо изменить вызывающий абонент , чтобы сохранить контекст или связать контекст:

Метод 1:

catchError(this.handleError.bind(this))

Метод 2:

catchError((err, caught) => this.handleError(err))

Answer 3

Вы можете использовать функцию стрелки как часть ES6.

user(): Observable<any> {
   return this.httpClient.get<any>('/users/details')
     .pipe(
       catchError(() => this.handleError())
     );
}


private handleError(error: HttpErrorResponse){
    console.log('handleError' , error);
    if (error.error instanceof ErrorEvent) {
      // A client-side error....
    } else {
      // The backend error...
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}` +
        `  ${error.message}`
      );

      this.router.navigate(['/errors']);
    }

  }