Question

在https://www.learnrxjs.io/recipes/smartcounter.html我找到了Angular 2+中数字计数器的一个很好的例子，代码看起来像：

@Component({
  selector: 'number-tracker',
  template: `
    <h3> {{ currentNumber }}</h3>
  `
})
export class NumberTrackerComponent implements OnDestroy {
  @Input()
  set end(endRange: number) {
    this._counterSub$.next(endRange);
  }
  public currentNumber = 0;
  private _counterSub$ = new Subject();
  private _subscription : Subscription;

  constructor() {
    this._subscription = this._counterSub$
      .switchMap(endRange => {
        return timer(0, 20)
            .mapTo(this.positiveOrNegative(endRange, this.currentNumber))
            .startWith(this.currentNumber)
            .scan((acc, curr) => acc + curr)
            // .delayWhen(i => {
            //   easing here
            // })
            .takeWhile(this.takeUntilFunc(endRange, this.currentNumber));
      })
      .subscribe(val => this.currentNumber = val);
  }

  private positiveOrNegative(endRange, currentNumber) {
    return endRange > currentNumber ? 1 : -1;
  }

  private takeUntilFunc(endRange, currentNumber) {
    return endRange > currentNumber
      ? val => val <= endRange
      : val => val >= endRange;
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();
  }
}

现在这很好用，但我想传递一个变量currentNumber而不是this.currentNumber默认值为0.

到现在为止，我到目前为止：

  public currentNumber: number;
...    
  @Input()
  set fanCountPrev(startRange: number) {
    this.currentNumber = startRange
    console.log('startRange: ', this.currentNumber)
  }

...

但是当一个新值到来时，this.currentNumber没有设置为以前的版本。

您有任何提示或示例来完成此任务吗？

Answer 1

这里的问题是订阅是在构造函数上进行的，而Input（）绑定是在ngOnInit生命周期中解析的。此外，在这种情况下，没有一个好的做法是在运行时手动修改this.currentNumber变量，因此是可观察计算的内部状态。我认为唯一的想法是修改它onInit，为此，正如我所说，你必须在ngOnInit生命周期函数中创建订阅，如下所示：

＆＃13;

@Component({
  selector: 'number-tracker',
  template: `
    <h3> {{ currentNumber }}</h3>
  `
})
export class NumberTrackerComponent implements OnDestroy {
  @Input()
  set end(endRange: number) {
    this._counterSub$.next(endRange);
  }
  @Input()
  set fanCountPrev(startRange: number) {
    this.currentNumber = startRange
    console.log('startRange: ', this.currentNumber)
  }
  private currentNumber = 0;
  private _counterSub$ = new Subject();
  private _subscription : Subscription;

  constructor() {
    
  }
  
  ngOnInit() {
    this._subscription = this._counterSub$
      .switchMap(endRange => {
        return timer(0, 20)
            .mapTo(this.positiveOrNegative(endRange, this.currentNumber))
            .startWith(this.currentNumber)
            .scan((acc, curr) => acc + curr)
            // .delayWhen(i => {
            //   easing here
            // })
            .takeWhile(this.takeUntilFunc(endRange, this.currentNumber));
      })
      .subscribe(val => this.currentNumber = val);
  }

  private positiveOrNegative(endRange, currentNumber) {
    return endRange > currentNumber ? 1 : -1;
  }

  private takeUntilFunc(endRange, currentNumber) {
    return endRange > currentNumber
      ? val => val <= endRange
      : val => val >= endRange;
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();
  }
}

＆＃13;

但请记住，此解决方案仅适用于启动。如果在此组件存在期间更改变量，则此操作无效。但正如我所说，在这种情况下这不是一个好习惯，因为它是一个实际计算的组件状态，它只对初始化有意义。

希望这有帮助。

RxJs switchMap：哇传递多个值？

1 个答案: