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

【问题标题】：Angular 2: Using service to share data between componentsAngular 2：使用服务在组件之间共享数据
【发布时间】：2017-11-06 10:18:51
【问题描述】：

我正在尝试使用服务在多个视图之间定义共享资源client。我首先从索引中选择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() 的调用永远不会返回错误或任何东西。我的 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")
    )
}

【问题讨论】：

你们在哪里提供服务？
在我试图显示数据的组件中。调用this.clientService.getClient() 的相同组件
这是做什么的？ val => this.client = val
我以为它会将getClient()返回的数据设置为this.client
我还添加了将行 () => {} 更改为 () => { console.log("completed") } 并且从未在控制台中看到它

标签： angular rxjs observable angular-services angular2-observables

【解决方案1】：

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

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

app.module.ts

 providers: [ ClientService  ],

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

{
constructor(clientService  : ClientService  ) { 

  }
}

【讨论】：

我没有意识到我不应该把它放在那里。删除它并没有解决问题。
你能创建plunker吗？
我已经尝试过，但无法正常工作。你能提供一个使用服务的 plunker 的链接吗？
我已经走到这一步了：plnkr.co/edit/f1qZvw01sswb3m04RhQT?p=preview
修复了几个问题。工作 plnkr plnkr.co/edit/OCaUBgnGj6AenWyeWLxA?p=preview 重点 1）从主组件中删除客户端服务提供者（尝试读取依赖注入） 2）使用行为主题而不是主题。下次继续清楚地解释问题，我花了很多时间来理解你的问题和笨拙。还有一件事是您的 plunker 与您的问题不匹配（plunker 本身没有 getClient 函数）

【解决方案2】：

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

【讨论】：