时间戳

首页 > 解决方案 > 监听由不相关组件更改的模型 - Angular 7

angular - 监听由不相关组件更改的模型 - Angular 7

问题描述

我正在尝试将现有应用程序转换为 Angular。我对 Angular 很陌生，并且真的在为很多我认为很简单的事情而苦苦挣扎。最新的尝试是在不相关的组件中捕获模型更改。

我的结构：应用程序>（布局/数据服务）>（组件A/组件B）

组件 A 订阅了一个数据服务，其模型表示一堆自定义子组件的值。这些子组件修改输入并将数值返回给组件 A，组件 A 进而更新数据服务中的模型。在这里没问题，这按描述的那样工作。

组件 B 也订阅了相同的数据服务，并根据模型值的进一步计算显示结果。问题是当组件 A 的子组件 B 的输入值发生更改时，组件 B 的值正在更新，但是当它们更新时我无法触发我的 UpdataCalculations() 函数。为了解决这个问题，我添加了 ngDoCheck() 并将我的函数放在那里，但这对我来说真的很恶心。我真正想做的是在组件 B 级别向模型添加一个 onChange 侦听器。

所以我想我的问题是 A：Angular 甚至可以做到这一点吗？B：有没有更好的方法来做到这一点？

服务：

export class JobDataService {
  private jobData = new BehaviorSubject(new Job_Info_View_Model);
  currentJob$ = this.jobData.asObservable();
  constructor() {}
}

B组份：

  constructor(
    private jobData: JobDataService,
  ) {}

  ngOnInit() {
    this.jobData.currentJob$.subscribe( (observing: Job_Info_View_Model) => { this.currentJob = observing; } );
  }

  ngDoCheck() {
    this.UpdataCalculations();
  }

感谢您的任何帮助

编辑：组件 A 和 B 成为单个组件确实没有意义，所以如果可以的话，我想避免这种情况。

标签： angularserviceobservable

解决方案

ngOnChanges当装饰器标记的字段@Input()从父组件获取新值时，将调用钩子。ngDoCheck每次更改检测都会调用一个人，而且这种情况很常见。在您的情况下，使用主题并在每次值更新时调用订阅回调，因此最好的选择是仅在该回调中进行计算。

this.jobData.currentJob$.subscribe( (observing: Job_Info_View_Model) => { 
  this.currentJob = observing;
  this.UpdataCalculations();
} );

推荐阅读