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

handleError的调用者是Observable，上下文不是您的控制器实例。您需要更改 caller 来维护上下文或绑定上下文：

方法1：

catchError(this.handleError.bind(this))

方法2：

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

Answer 2

您可以将箭头功能用作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']);
    }

  }

Answer 3

要检查您的上下文是否正确，并检查是否向组件提供了router变量，请尝试打印this。

console.log(this)

它将打印类似于

的内容

MyComponent {..., router: Router, ...}（如果路由器已提供给组件）

未定义的属性导航

3 个答案: