如何在 Angular 中侦听组件中的服务变量更改答案

【问题标题】：How can I listen for a Service variable change in a component in Angular如何在 Angular 中侦听组件中的服务变量更改
【发布时间】：2021-04-05 21:19:01
【问题描述】：

我有一个带有按钮的组件，该按钮在单击时触发 showSummary()，它调用具有方法 calc() 的服务 Appraisal-summary.service.ts

showSummary(appraisal) {
  this.summaryService.calc(appraisal);
}

服务Appraisal-summary.service.ts：

calc(appraisal) {
  ...
  //a 'scores' array is created (synchronously)
  return this.scores;
}

如何监听同步结果 this.scores 以触发将使用 scores 的不相关组件 summary.component.ts（已初始化）中的函数。

类似： summary.component.ts:

ngOnInit(): void {
  service.subscribe(scores => this.data = scores)
}

【问题讨论】：

这能回答你的问题吗？ Angular 5 service variable value updating

标签： javascript angular typescript observable synchronous

【解决方案1】：

您可能希望在您的Appraisal-summary.service.ts 中添加一个Subject，如下所示：

import { Subject } from 'rxjs';

...
export class AppraisalSummaryService {
    // I am guessing scores is an array of type number
    public scoreSubject = new Subject<number[]>(); 
    
    calc(appraisal) {
      ...
      //a 'scores' array is created (synchronously)
      
      this.scoreSubject.next(this.scores); //emit the scores result
      return this.scores;
   }
}

并且，在您的其他组件中，在您的 ngOnInit 中，您想收听这个结果：

import { Subscription } from 'rxjs';
....
export class YourOtherComponent implements OnInit, OnDestroy {
   private subscription: Subscription;

   constructor(private appraisalSummaryService: AppraisalSummaryService) {}

   public ngOnInit(): void {
     // you store your subscribe
     this.subscription = this.appraisalSummaryService.subscribe((scores: number[]) => {
       console.log(scores);
    });
   }
   
   public onDestroy(): void {
     // you need this in order to avoid a memory leak
     this.subscription.unsubscribe();
   }
   
}
```

【讨论】：