Subsribing到可观察的数据提交在angular2

Question

我试图用下列方式可观察/行为主体： 我有其中显示无处不在的应用为背景的组成部分。 在一个显示在该背景上的表单组件中，我想要 将来自用户的数据和 使用此数据进行异步调用，并使用该异步调用的结果在该后台组件中的方法
所以在我app.component.ts我有

<app-header></app-header> 
<backround-component></background-component> 
<router-outlet></router-outlet> 

LN在我的我的app.routing.ts我：

const appRoutes: Routes = [ 
    { path: '', 
    redirectTo: 'home', 
    pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent }, 
    { path: 'form-component', component: Form component where the user submits the data }, 
]; 

在外形component.html我：

<button class="btn--submit" (click)="onClick()">Click</button> 

所以我试图做的是：

1）对数据的提交表单组件调用从服务，建立了基于提交的数据的请求的方法：

onClick = function() { 
    this.service.makeAsynchCall(dataFromTheUser); 
} 

2）请到远程API异步调用：

public makeAsynchCall(dataFromTheUser): Observable<any> { 
    // build the request based on the data 
    return Observable.create((observer) => { 
     this.someRemoteService.route(request, (response, status) => { 
      observer.next(response); 
     }); 
    }); 
} 

3）订阅在后台的组件，可观察到在ngBeforeView生命周期钩，这样我可以使用第响应E：

ngBeforeView { 
    this.service.makeAsynchcall().subscribe(response => 
     this.useTheResponse(response); 
    ); 
} 

我假设的情况是，在这样的背景分量非同步调用首先被强制调用加载，那么它有力地调用，从用户希望数据的方法，该数据未提交然而，请求失败。 我还尝试了另一种方案 - 使用BehaviourSubject/AsyncSubject作为连接件，利用observer和Observable的角色，并在数据到达时通知其他订户，并且这些订户不起作用。 非常感谢您的帮助。

更新：尝试基于以下

这里的答案例如下面就是我试图做的。在我的订户中，next（）方法只是打印收到的值。一切是相同的（除了我没有创建数据模型）

public update(data) 
{ 
    let request = {}; // build request object based on 'data' 

    this.source.next(data); // subscriber doesn't get the value (not printed) 

    // make async call 
    this.service.asyncCall(request, (response, status) => { 
     if (status == OK) { 
      console.log('got result'); // this prints, so we get here 
      this.source.next(data); // subscriber doesn't get the value (not printed) 
     } 
    }); 
} 

Answer 1

嘿，我让你和例如如何通过将可观测的服务共享多个组件之间的数据：

import {ReplaySubject, Subscription} from "rxjs"; 

export class DataModel 
{ 
    constructor(public valueOne: string, 
       public valueTwo: string) 
    { 

    } 
} 

export class FormComponent 
{ 

    constructor(private shareService: ShareService) 
    { 
    } 

    onFormSubmit(formData: DataModel) 
    { 
     const newData = new DataModel(formData.valueOne, formData.valueTwo) 
     this.shareService.update(newData); 
    } 

} 
export class ShareService 
{ 
    private source = new ReplaySubject<DataModel>(); 
    public source$ = this.source.asObservable(); 

    public update(data) 
    { 
     this.source.next(data) 
    } 
} 


export class BackGroundComponet 
{ 
    private subscription: Subscription; 
    private data: DataModel; 

    constructor(private shareService: ShareService) 
    { 
     this.subscription = this.shareService 
      .source$ 
      .subscribe(data => 
      { 
       this.data = data; //assign new data to class member 
       this.onShareServiceUpdated(); //call some method to do something with it 
      }); 
    } 

    private onShareServiceUpdated() 
    { 
     //Make api call with new data 
     console.log(this.data); 
    } 
}