无论父母和孩子如何,在两个组件之间共享数据 - angular2

时间:2017-08-23 17:45:12

标签: javascript angular behaviorsubject

我一直在使用BehaviorSubject在组件之间共享数据。 比方说,relative url / article属于ArticleComponent。然后是ArticlelistComponent中的/ article / list,其中包含一个包含文章详细信息列表的表。单击任何行,我需要将行详细信息传递给所有其他组件,这是我的议程。 我面临的问题是,ngOnInit仅适用于页面重新加载。最初,只有default {}反映在articlecomponent中,这只是我为BehaviorSubject.WHen设置的默认结果,我点击表格中的一行,该数据不会在ngOnInit中自动更新和订阅。旧值{}保留我不知道在哪里放置它以便立即反映变化。请帮忙解决。 我的代码如下:

articlelist.component.ts

getSpecificDetail(value){
        this.articleService.getArticleDetail(value);
   }

article.service.ts

 public articledata=new BehaviorSubject<Object>({});
    currentdata=this.articledata.asObservable();
  getArticleDetail(data){         //data comes from articlelist.component
          return this.articledata.next(data);
    }

article.component.ts

 ngOnInit(){
    this.articleService.currentdata.subscribe(data=>{
    this.data=data;
    console.log(this.data);
    })
   }

编辑:我已在Angular2:RxJS Subject not responding to events

中扩展了我的观察结果

2 个答案:

答案 0 :(得分:1)

根据您对该数据的处理方式,在绑定到该数据的组件之间共享数据的另一种方法是利用Angular的更改检测,而不是使用您自己的BehaviorSubject

import { Injectable } from '@angular/core';

@Injectable() 
export class DataService {
  serviceData: string; 
}

我在这里有一篇博文:https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

这里有一个吸烟者:https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

答案 1 :(得分:0)

它应该像这样工作(这就是我一直使用Observables和Subjects的方式)。我总是试图确保我从主机服务中触发并提供订阅,以便将问题分开。

文章组件

  getSpecificDetail(value){
       this.articleService.setData(value);
  }

article.service.ts

  articledata=new BehaviorSubject<Object>({});

  getData() : Observable<Object> {
     return this.articleData.asObservable();
  }
  setData(data) : void { this.articleData.next(data); } 

article.component.ts

 ngOnInit(){
    this.patientService.getData().subscribe( data =>{
        this.data=data;
         console.log(this.data);
     })
 }

您是否特意使用行为主题?