未定义的属性导航答案

【问题标题】：property navigate of undefined未定义的属性导航
【发布时间】：2018-10-03 21:08:03
【问题描述】：

应用服务

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 指的是错误的上下文？

【问题讨论】：

您是否已将RouterModule 导入到您的模块中？
是的...import { Router } from '@angular/router';
你不是想在任何地方提供路由器吗？
当我说导入时，我的意思是在您的模块导入部分。 @NgModule({ 导入：[CommonModule, RouterModule
我已经在上面添加了我的 app.module.ts....感谢您抽出宝贵的时间

标签： javascript angular

【解决方案1】：

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

方法一：

catchError(this.handleError.bind(this))

方法二：

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

【讨论】：

非常感谢方法 1 有效。方法2给了我这个错误Argument of type '() => (error: HttpErrorResponse) => Observable<never>' is not assignable to parameter of type '(err: any, caught: Observable<any>) => ObservableInput<{}>'.

【解决方案2】：

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

console.log(this)

它将打印类似于

的内容

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

【讨论】：

【解决方案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']);
    }

  }

【讨论】：

你忘了给this.handleError打电话