Angular 6 ERROR TypeError：无法读取未定义的属性“导航”答案

【问题标题】：Angular 6 ERROR TypeError: Cannot read property 'navigate' of undefinedAngular 6 ERROR TypeError：无法读取未定义的属性“导航”
【发布时间】：2019-02-06 08:07:28
【问题描述】：

在我的错误处理程序中，当我遇到错误时，我试图导航到另一个页面。

如果失败，我会尝试获取项目列表，我想导航到“./error401”。我一直在尝试这样做：

UserTable 组件：

export class UserDataSource extends DataSource<any>{


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

  disconnect() { }
}

这个调用可能有点奇怪。它的作用是调用其他人，看看我基于令牌拥有的 ID。然后在下一次调用中使用该 ID

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”但得到

错误错误类型错误：无法读取未定义的属性“导航”

这是完整的错误日志：

错误类型错误：无法读取未定义的属性“导航” 在 CatchSubscriber.push../src/app/myerrorHandle.ts.myerrorHandle.handleError [作为选择器] (myerrorHandle.ts:18) 在 CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33) 在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (订阅者.js:80) 在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (订阅者.js:60) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (订阅者.js:80) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (订阅者.js:60) 在 FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (订阅者.js:80) 在 FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (订阅者.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)

【问题讨论】：

将 catchError 更改为 catchError((err) => this.myerrorhandle.handleError(err))) 否则（没有箭头函数）this 的上下文丢失

标签： node.js angular typescript rxjs

【解决方案1】：

正如@user184994 所说：

将 catchError 更改为 catchError((err) => this.myerrorhandle.handleError(err))) 否则（无箭头函数) this 的上下文丢失了

【讨论】：

【解决方案2】：

您需要在代码中使用箭头函数才能使用类上下文this

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

【讨论】：