未定义的属性导航

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，上下文不是你的控制器实例。您需要更改调用方以维护上下文或绑定上下文：

方法一：

catchError(this.handleError.bind(this))

方法2：

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

Answer 2

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

console.log(this)

它将打印类似于

MyComponent {..., router: Router, ...}是否向组件提供了路由器

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']);
}
}