Angular 从角度上的可观测数据返回要订阅的数据

Angular 从角度上的可观测数据返回要订阅的数据,angular,rxjs,Angular,Rxjs,我试图将数据返回到我的组件,然后使用作为参数传递的来自服务的数据触发路由。我认为我使用了不正确的观察值,并且对数据是否可以返回到订阅服务器或者是否应该从服务提供商触发路由感到困惑。来自服务提供商的触发路由的问题是范围在extractData内发生了更改。我可以从extractData()中访问此.router吗?提交表单时,组件的设置如下所示: 更新: 组成部分: private dataFromServer: ShortFormModel; onSubmit(shortForm: any) {

我试图将数据返回到我的组件,然后使用作为参数传递的来自服务的数据触发路由。我认为我使用了不正确的观察值,并且对数据是否可以返回到订阅服务器或者是否应该从服务提供商触发路由感到困惑。来自服务提供商的触发路由的问题是范围在extractData内发生了更改。我可以从extractData()中访问此.router吗?提交表单时,组件的设置如下所示:

更新:

组成部分:

private dataFromServer: ShortFormModel;
onSubmit(shortForm: any) {
    if (!shortForm) { return; }
    const formModel = this.shortForm.value;
    this.shortFormService.create(formModel)
    .subscribe(body => { this.dataFromServer = body; console.log(body) })
  }) 
 }
服务提供者:

create(shortForm: any): Observable<ShortFormModel> {
 let headers = new Headers({'Content-Type': 'application/json'});
 let options = new RequestOptions({headers: headers});

 return this.http.post(this.preCheckUrl, shortForm, options)
  .map((res) => this.extractData(res))
  .catch(
  (error: any): Promise<any>=> {
    this.router.navigate(['/error', error]);
    return Promise.reject(error.message || error);
  }
 )
}

private extractData(res: Response) {
  let body = res.json();
  this.router.navigate(['/apply', body.appId])
  return body|| { };
}

当你使用

.map(this.extractData)
范围在
extractData
中更改。您必须将对
this.extractData
的调用封装在lambda/fat arrow函数中以保留作用域,如下所示:

.map((res) => this.extractData(res))

当你使用

.map(this.extractData)
范围在
extractData
中更改。您必须将对
this.extractData
的调用封装在lambda/fat arrow函数中以保留作用域,如下所示:

.map((res) => this.extractData(res))

太好了,行得通!至于我问题的另一部分,我如何将数据返回到组件?现在,我似乎可以访问响应的唯一方法是从extractData。您可以从subscribe方法的成功回调中的可观察对象“内部”访问数据,如下所示:`.subscribe(res=>{this.componentProperty=res;this.router.navigate(['/apply',res])`但是,这是有意义的,subscribe中的“res”只是一个空对象,即使它们是响应。请参阅上面我更新的实现。好的,使用该有效负载,您需要访问类似以下内容的有效负载:
this.router.navigate(['/apply',body.appId])
返回body |{(内部提取数据())谢谢;)您只需从
extractData
返回
body
,而不必返回
body.data
thoughPerfect,这很有效!至于我问题的另一部分,我如何将数据返回到组件?现在,我似乎可以访问响应的唯一方法是从extractData。您可以从subscribe方法的成功回调中的可观察对象“内部”访问数据,如下所示:`.subscribe(res=>{this.componentProperty=res;this.router.navigate(['/apply',res])`但是,这是有意义的,subscribe中的“res”只是一个空对象,即使它们是响应。请参阅上面我更新的实现。好的,使用该有效负载,您需要访问类似以下内容的有效负载:
this.router.navigate(['/apply',body.appId])
返回body |{(内部提取数据())谢谢;)您只需要从
extractData
返回
body
,而不是
body.data