Angular 2：使用服务在组件之间共享数据

Question

我正在尝试使用服务在多个视图之间定义共享资源client。我首先 select 来自索引的 client 并设置它：

itemTapped(event, client) {
  this.clientService.get(`/${client.id}?model=client`, this.current_user.auth_token)
    .subscribe(
      data => {
        this.clientService.setClient(data)
        this.navCtrl.push(ClientGenericPage, {
          client_id: data['id'],
          tab: 'profile',
          current_user: this.current_user
        });
      },
      err => { 
        this.clientService.handleResponse("Ut oh.. Could not locate the client !"),
        this.clientService.hideLoader()
      },
      () => this.clientService.hideLoader()
    )
}

export class ClientService {

  private client = new Subject<any>();


  constructor (private http: Http, private toastCtrl: ToastController, public storage: Storage ) {

  }

  setClient(client) {
    this.client.next(client)
  }

  getClient() {
    return this.client.asObservable();
  }

  get(url, token):Observable<Response> {
    let headers = new Headers();
    headers.append("authentication", token );
    let options = new RequestOptions({ headers: headers });

    let final_url = `${this.baseUrl}${url}`

    return this.http.get(final_url, options)
      .map(this.extractData)
      .catch(this.handleError)
  }
}

然后我尝试获取刚刚设置的客户端并订阅它，以便我可以检测到此视图及其兄弟中 client 的更改：

this.clientService.getClient()
  .subscribe(
    val => {
      console.log(val)
      this.client = val
    },
    err => console.log(err),
    () => {}
)

但是对 getClient() 的调用从来没有 returns 一个错误或任何东西。我的 Observable 做错了什么？

编辑：这是组件：

@Component({
  selector: 'page-client-details',
  templateUrl: 'client-details.html',
  providers: [FilterObject, ClientService]
})
export class ClientDetailsPage {
  client:any;
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private filterObject: FilterObject, 
    public http: Http,
    public modalController: ModalController,
    private clientService: ClientService,
    private app: App
  ) {

  this.clientService.getClient()
    .subscribe(
      val => {
        console.log(val)
        this.client = val
      },
      err => console.log(err),
      () => console.log("completed")
    )
}

Answer 1

您可以尝试使用 BehaviorSubject 而不是 Subject，您需要的唯一更改是提供默认值。我修复了同样的错误，但没有发现问题。

Answer 2

为什么要在组件 class 中定义 ClientService。是 ClientService 相关的单一组件吗？

您需要在 app.module.ts 中提供 ClientService 并在组件 class 中注入 clientservice。如果您在组件中提供客户端服务，它将为组件创建不同的实例

app.module.ts

 providers: [ ClientService  ],

ClientDetailsPage.ts 删除提供商：[ClientService]

{
constructor(clientService  : ClientService  ) { 

  }
}

Angular 2：使用服务在组件之间共享数据

Angular 2: Using service to share data between components

observable

rxjs

angular-services

angular2-observables

angular