1. 在组件中声明一个时间戳以代表倒计时的结束时间。
2. 创建一个自定义pipe，用于转换毫秒数为倒计时格式。
3. 在组件模板中使用Async pipe监听Observable的变化，从而动态获取倒计时的变化。

下面是一个示例代码：

组件：

import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: '
{{ countdown | async }}
'
})
export class AppComponent {
  endTime = Date.now() + 10000;

  countdown: Observable =
    interval(1000).pipe(
      map(() => {
        const diff = this.endTime - Date.now();
        if (diff <= 0) {
          return '00:00:00';
        }
        const hours = Math.floor(diff / 3600000);
        const minutes = Math.floor((diff % 3600000) / 60000);
        const seconds = Math.floor((diff % 60000) / 1000);
        const formatted = [
          hours.toString().padStart(2, '0'),
          minutes.toString().padStart(2, '0'),
          seconds.toString().padStart(2, '0')
        ].join(':');
        return formatted;
      })
    );
}

自定义pipe：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'msToTime'
})
export class MsToTimePipe implements PipeTransform {

  transform(ms: number): string {
    const hours = Math.floor(ms / 3600000);
    const minutes = Math.floor((ms % 3600000) / 60000);
    const seconds = Math.floor((ms % 60000) / 1000);
    const formatted = [
      hours.toString().padStart(2, '0'),
      minutes.toString().padStart(2, '0'),
      seconds.toString().padStart(2, '0')
    ].join(':');
    return formatted;
  }
}

模板：

{{ (