Angular 6 ERROR TypeError:无法读取未定义的属性“ navigate”

时间:2018-08-31 09:57:24

标签: node.js angular typescript rxjs

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

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

UserTable组件:

export class UserDataSource extends DataSource<any>{


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

  disconnect() { }
}

这个电话可能有点奇怪。它的作用是打电话给其他人,以查看我根据令牌拥有的ID。然后在下一个通话中使用ID

身份验证服务

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

  

错误ERROR TypeError:无法读取未定义的属性'navigate'

这是完整的错误日志:

  

错误TypeError:无法读取未定义的属性“ navigate”       在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中   (Subscriber.js:80)       在MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error中   (Subscriber.js:60)       在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error中   (Subscriber.js:80)       在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error中   (Subscriber.js:60)       在FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error中   (Subscriber.js:80)       在FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error中   (Subscriber.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)

2 个答案:

答案 0 :(得分:2)

@ user184994说:

  

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

答案 1 :(得分:0)

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

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