【问题标题】:Share data between two components irrespective of parent and child - angular2无论父母和孩子如何,在两个组件之间共享数据 - angular2
【发布时间】:2017-08-23 17:45:11
【问题描述】:

我一直在使用 BehaviorSubject 在组件之间共享数据。 比如说,相对 url /article 属于 ArticleComponent。然后是 ArticlelistComponent 中的 /article/list,其中包含一个包含文章详细信息列表的表格。单击任何行时,我需要将该行详细信息传递给所有其他组件,这就是我的议程。 我面临的问题是,ngOnInit 仅适用于页面重新加载。最初,只有默认 {} 反映在文章组件中,这不过是我为 BehaviorSubject 设置的默认结果。当我单击表中的一行时,该数据不会在 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中扩展了我的观察

【问题讨论】:

  • 您如何更改 articledata 更改数据?
  • 每次点击表格中的任何一行时,从getArticleDetail传递的数据都不同。
  • 流程是这样的,。单击一行时,我将该数据从 articlelist 组件传递到此服务。
  • 好的。所以这里return 声明是不必要的。
  • 没有那个,方法会被认为是无效的吗?

标签: javascript angular behaviorsubject


【解决方案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

【讨论】:

  • 这种方法的吸引力:您可以轻松地在不同实例之间共享值,这也是它的失败之处。随着应用程序的增长,您开始有 10 多个实例访问甚至修改相同的“全局”值或对象,事情变得非常不可预测。视图状态开始不可预测地“泄漏”。这是 UI 开发的反应模型变得如此流行的原因之一——它确保了分离。订阅者正在获取相同的数据,但他们所做的任何事情都不会影响源数据。它只会影响他们的新个人副本。它使调试变得更加容易。
  • 同意。这就是为什么它实际上取决于您对数据的处理方式。如果您有简单的 CRUD 操作或简单的主从布局,那么这是一个不错的简单选项。如果您像您所说的那样有 10 个更新值的组件,那么可能需要更复杂的东西。但似乎BehaviorSubject 也可能不是最好的答案;而不是像ngrx/store这样的东西。
【解决方案2】:

它应该像这样工作(这就是我一直使用 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);
     })
 }

您有什么理由专门使用行为主题?

【讨论】:

  • 我想,我的问题是,ngOnInit 仅在重新加载时才加载。
  • 我面对的和以前一样。只是 {},没有别的。
  • 而 {} 只不过是我在 behaviorsubject 中设置的默认值
  • 我认为,了解如何在不刷新本身的情况下在 ngOnInit 上加载数据将解决这个问题
  • 问题不在于代码。我也将服务声明为患者列表组件中的提供者。这弄得一团糟。现在是一个新问题。 stackoverflow.com/questions/45864989/…
猜你喜欢
  • 2017-08-08
  • 1970-01-01
  • 2020-04-21
  • 2015-10-05
  • 2012-02-03
  • 1970-01-01
  • 2017-09-29
  • 1970-01-01
  • 2017-10-25
相关资源
最近更新 更多