Angular 4：组件和服务之间的变更检测

Question

我目前正在与 Ionic/Angular 合作进行一个小型测试项目，在我 post 片段之前：我遇到的问题是我想将值更改从服务 (@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>

（归功于 JoshMorony）条形图的宽度属性与进度相关联，从而使其能够前进，例如按百分比。

问题来了：

我将进度条注入到一个普通组件中，但是进度条的计算是在另一个服务 Injectable 中进行的。我只能发送一个值，但不能发送计算的进度以及柱本身：

home.ts

showProgressBar: boolean;
// this variable must always have a value between 0 - 100
loadProgress;

triggerEvent(){
this.service.showProgressbar = true;
}

home.html

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

这里所做的只是调用触发事件，其中包括该进度条的逻辑。通过将服务的 showProgressbar 设置为 true，我也间接将页面 showprogressbar 设置为 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 "watch" 的结果值不断变化或以其他方式如何在此处实现对该结果值的变化检测？

谢谢！

Answer 1

您可以创建服务的 Observable 并在 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 函数或 progressBar.component ngOnInit 函数中订阅 observable

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;
    } 
}

Angular 4：组件和服务之间的变更检测

Angular 4: Change Detection between component and service

ionic2

angular2-changedetection

angular