[英]How can I listen for a Service variable change in a component in Angular
I have a component with a button that triggers showSummary()
when clicked that calls a service Appraisal-summary.service.ts
that has a method calc()
我有一个带有按钮的组件,该按钮在单击时触发
showSummary()
调用具有方法calc()
的服务Appraisal-summary.service.ts
showSummary(appraisal) {
this.summaryService.calc(appraisal);
}
with service Appraisal-summary.service.ts
:使用服务
Appraisal-summary.service.ts
:
calc(appraisal) {
...
//a 'scores' array is created (synchronously)
return this.scores;
}
How do I listen for the synchronous result this.scores
to trigger a function in an unrelated component summary.component.ts
(that has already been initialised) that will use scores
.如何侦听同步结果
this.scores
以触发 function 在不相关的组件summary.component.ts
(已初始化)将使用scores
。
something like: summary.component.ts
:类似于:
summary.component.ts
:
ngOnInit(): void {
service.subscribe(scores => this.data = scores)
}
You would want to add a Subject
inside your Appraisal-summary.service.ts
like this:您可能希望在
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;
}
}
And, in your other component, inside your ngOnInit
, you want to listen to this result:而且,在您的其他组件中,在您的
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();
}
}
```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.