Angular，当其中一个组件调用服务中的特定功能时，如何更新显示在多个组件上的数据？

Question

上下文

我有一个 Angular 10 项目呈现以下内容（我正在为 8 位计算机建模）：

这个项目使用了一个Angular服务，看起来像这样（以后会封装更复杂的逻辑，但我简化了代码以帮助关注问题）：

import { Injectable } from '@angular/core';
 
@Injectable({
   providedIn: 'root'
})
export class SapOneService {
 
   data = {
       bus: {
           bits: [1, 1, 1, 1, 0, 0, 0, 0]
       },
       registers: [
           {
               bits: [0, 0, 0, 0, 0, 0, 0, 1],
               load: false,
               enable: false
           },
           {
               bits: [1, 0, 0, 0, 0, 0, 0, 0],
               load: false,
               enable: false
           }
       ]
   };
 
   constructor() { }
 
   tick(): void {
       if (this.data.registers[0].load) {
           this.data.registers[0].bits = this.data.bus.bits;
       }
 
       if (this.data.registers[1].load) {
           this.data.registers[1].bits = this.data.bus.bits;
       }
 
       if (this.data.registers[0].enable) {
           this.data.bus.bits = this.data.registers[0].bits;
       }
 
       if (this.data.registers[1].enable) {
           this.data.bus.bits = this.data.registers[1].bits;
       }
 
       console.log(this.data);
   }
}

我有 4 个 Angular 组件使用此服务：

(BLOCK: Register A and B) 2个组件可以读取和编辑分别包含在this.data.registers[0]和this.data.registers[1]上的数据。
(BLOCK: Bus) 1个组件可以读取和编辑this.data.bus
(BLOCK: Clock) 最后一个组件只有一个按钮，单击该按钮会调用函数 tick()，使 this.data.registers[0]、this.data.registers[1] 和 this.data.bus 上包含的所有数据变为根据该函数内的规则进行更改。

我正在控制台中打印数据，基本上逻辑正常，但遗憾的是组件上的信息没有更新（灰色和红色的点）。

我想实现的是：当调用 tick() 方法时，所有组件也会更新。

有人可以帮我解决这个问题吗？

Answer 1

您可以尝试在您的服务中添加一个 'Subject' 作为 Observable。所有组件都应订阅您的可观察对象（主题）。每当您的主题使用 'next' 发出新值时，订阅您主题的所有组件都会收到通知。您可以尝试查看 'rxjs subject' 的文档： https://rxjs-dev.firebaseapp.com/guide/subject

Angular，当其中一个组件调用服务中的特定功能时，如何更新显示在多个组件上的数据？

Angular, How can I update the data displayed on several components when one of them makes a call to a specific function in a service?

angular-services

angular