共享数据 - angular2

问题描述：

我一直在使用BehaviorSubject共享组件之间的数据。说，相对url/article属于ArticleComponent。然后是在ArticlelistComponent /条/列表，它包含任何行的文章details.On点击列表中的表，我需要该行的细节被传递到所有其它组件，这就是我的议程。我面对的问题是，ngOnInit仅适用于页面重新加载。最初，只有默认{}得到体现在articlecomponent这是什么，但我已经为我BehaviorSubject.WHen点击在表中的行默认的结果，数据亘古不变的得到更新，并在ngOnInit.the旧值自动订阅{}被保留我不确定在哪里放置它以便立即反映更改。请帮忙解决。我的代码如下：
共享数据 - angular2

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

你如何改变上改变了'articledata'数据？ – Rajez

其从getArticleDetail传递的数据上对表中的任何单列的每次点击不同。 – Gayathri

流量就是这个。在点击一行时，我将文章列表组件中的数据传递给此服务。 – Gayathri

答

根据您正在使用的数据做什么，另一种方式来共享绑定到数据部件之间的数据是通过利用角的变化检测，而不是使用自己的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/

而且这里plunker：https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

此方法的吸引力：您可以轻松地在不同实例之间共享值，也是它的缺点。随着应用程序的增长，并且您开始有10多个实例访问甚至修改相同的“全局”值或对象，事情变得极不可预测。视图状态开始不可预测地“泄漏”。这是UI开发反应模式变得如此流行的原因之一 - 它确保了分离。订阅者获得相同的数据，但他们没有做到这一点会影响源数据。它只影响他们的新个人副本。它使调试更容易。 – diopside

同意。这就是为什么它真的取决于你对数据做什么。如果你有简单的CRUD操作或简单的主和布局布局，那么这是一个不错的简单选项。如果你像你说的那样有10个组件更新值，那么可能需要更复杂的东西。但似乎'BehaviorSubject'可能不是最好的答案;而不像ngrx/store。 – DeborahK

答

它应该是这样的（这是我怎么总是用观测量和主题）。我总是尽力确保自己触发并提供来自主机服务的订阅，以保持关注点分离。

物品部件

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); 
    }) 
}

你使用行为主体特别的原因吗？

我认为，我的问题在于，ngOnInit仅在重新加载时才加载。 – Gayathri

我面对我以前遇到过的。只是{}而没有别的。 – Gayathri

而且{}不过是我在behaviorubject – Gayathri

共享数据 - angular2

相关推荐