Angular管道结合RXJS pipe与map实现倒计时计时器不生效问题

问题根因 #

1. 自定义timeRemaining管道的返回值为Observable<string>类型，直接在模板中使用插值渲染时，Angular会将Observable对象直接转为字符串输出，因此显示为[object Object]。
2. RxJS的Observable为冷数据源，未被订阅的情况下，内部pipe、map包裹的逻辑不会执行，所以你写在map中的代码始终不会触发。
3. 你测试时用subscribe替换pipe的方案无法生效，是因为subscribe返回的是Subscription订阅对象，而非倒计时字符串值，且异步更新的内容不会自动触发模板重渲染，因此页面看不到更新。

解决方案 #

方案一（推荐，性能最优）：模板配合async管道 #

无需修改现有管道逻辑，仅需在模板中管道后追加Angular内置的async管道即可。async管道会自动订阅Observable获取返回值渲染，还会在组件销毁时自动取消订阅，避免内存泄漏：

<span class="float-right yb-color">{{event.datePendingUtc | timeRemaining | async}}</span>

方案二：改造管道为同步输出（无需修改模板） #

如果不想在模板中加async管道，可以改造管道逻辑，内部自行订阅Observable并主动触发变更检测，代码如下：

import { Pipe, PipeTransform, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { Subscription, timer } from 'rxjs';
import { map } from 'rxjs/operators';

@Pipe({
  name: 'timeRemaining',
  pure: false // 标记为非纯管道，允许异步更新值后重新执行
})
export class TimeRemainingPipe implements PipeTransform, OnDestroy {
  // 存储订阅实例，用于销毁
  private timerSub: Subscription | null = null;
  // 存储最新的倒计时值
  private latestTime: string | null = null;

  constructor(private cdr: ChangeDetectorRef) {}

  public transform(futureDate: string): string | null {
    // 先销毁之前的订阅，避免重复订阅
    if (this.timerSub) {
      this.timerSub.unsubscribe();
      this.timerSub = null;
    }

    // 边界校验不变
    if (!futureDate || this.getMsDiff(futureDate) < 0) {
      this.latestTime = null;
      return null;
    }

    // 内部订阅定时器
    this.timerSub = timer(0, 1000).pipe(
      map(() => this.msToTime(this.getMsDiff(futureDate)))
    ).subscribe(val => {
      this.latestTime = val;
      // 通知Angular变更检测，更新视图
      this.cdr.markForCheck();
    });

    return this.latestTime;
  }

  // 管道销毁时取消订阅，避免内存泄漏
  ngOnDestroy(): void {
    if (this.timerSub) {
      this.timerSub.unsubscribe();
    }
  }

  // 原有工具方法不变
  private getMsDiff = (futureDate: string): number => (+(new Date(futureDate)) - Date.now());

  private msToTime(msRemaining: number): string | null {
    if (msRemaining < 0) {
      console.info('No Time Remaining:', msRemaining);
      return null;
    }

    let seconds: string | number = Math.floor((msRemaining / 1000) % 60),
      minutes: string | number = Math.floor((msRemaining / (1000 * 60)) % 60),
      hours: string | number = Math.floor((msRemaining / (1000 * 60 * 60)) % 24);

    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    hours = hours < 10 ? '0' + hours : hours;

    return `${hours}:${minutes}:${seconds}`;
  }
}

改造完成后模板可以沿用原有写法，无需修改。

内容的提问来源于stack exchange，提问作者chuckd