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>

（归功于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>

这里所做的只是一个触发事件的调用，包括该progressBar的逻辑。通过将service＆＃39; sshowProgressbar设置为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＆＃34;观看＆＃34;结果的值不断或以其他方式我如何在这里实现该结果值的变化检测？

谢谢！

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中的observable或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;
    } 
}

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

1 个答案: