角度 4:组件和服务之间的更改检测

Question

我目前正在与Ionic/Angular一起做一个小型测试项目， 在我发布代码片段之前：我遇到的问题是我想将值更改从服务内部发送到(@Injectable)component以跟踪其更改。我已经尝试过EventEmitter和OnChanges，但无济于事。

我有一个进度条，需要一定的值才能继续前进。这是进度条：TS：

import {Component, Input} from '@angular/core';

@Component({
selector: 'progressbar',
templateUrl: 'progressbar.html'
})
export class ProgressBarComponent {
@Input('progress') progress;
constructor() {}
}

.html

<div class="progress-outer">
<div class="progress-inner" [style.width]="progress + '%'">
{‌{progress}}%
</div>
</div>

(感谢乔什莫罗尼) 条形的宽度属性与进度相关联，从而使其能够按百分比前进。

现在问题来了：

我将进度条注入到普通组件中，但进度的计算发生在不同的服务中，即可注射的服务。我只能发送一个值，但不能发送计算的进度，因此柱线本身：

首页

showProgressBar: boolean;
// this variable must always have a value between 0 - 100
loadProgress;
triggerEvent(){
this.service.showProgressbar = true;
}

首页.html

<progressbar [progress]="loadProgress"></progressbar>

这里所做的只是调用来触发一个事件，其中包括该进度条的逻辑。通过将服务的showProgressbar设置为true，我也间接地将页面显示进度条设置为true。

注意：布尔值尚未使用

服务如下所示：

denominator: number = 0;
counter: number = 0;
showProgressbar = false;
result: number = 0;
calculateProgress() {
if (this.showProgressbar = true) {
let percentage = Math.round((this.counter / this.denominator) * 100);
this.result = percentage;
if (this.result == 100) {
setTimeout(this.showProgressbar = false, 500);
}
} else {
this.counter = 0;
this.denominator = 0;
this.result = 0;
}
}

我检查了电话，这里的结果确实计算正确，但不幸的是它没有转移到home.ts。如果我静态地将结果更改为像 50 左右这样的随机数，它确实会改变条形图。

如何home.ts持续或以其他方式"监视"结果值，如何在此处实现该结果值的变化检测？

谢谢！

Answer 1

您可以创建服务的可观察量并在 home.ts 中订阅

您的服务

//create a Subject
private percentSource:Subject<any>=new Subject<any>();
//create a Observable
percentEvent:Observable<any>=this.percentSource.asObservable();
...
calculateProgress() {
if (this.showProgressbar = true) {
...
//send a change of observable with next
this.percentSource.next(percentage);  //return as result the percent
...
} else {
...
}
}

然后，在您的家中，您可以订阅 tiggereven 函数中的可观察量 或 ngOnInit 函数中的 progressBar.component

triggerEvent(){
this.service.showProgressbar = true;
//takeWhile make you unsubscribe if condition is not successfully
//NOT put if you subscribe in your progressBar.component
this.service.percentEvent
.takeWhile(() =>this.progress!=100)
.subscribe(result=>  
{
this.progress=result;
} 
}