Javascript 如何使用Rxjs Observable和Async管道为Angular 4中的每日重复事件创建倒计时计时器

我正在尝试使用Rxjs Observable和异步管道为Angular 4中的每日重复事件创建一个倒计时计时器。以下是我的组件：

interface Time {
  hours: number;
  minutes: number;
  seconds: number;
}
@Component({
  selector: 'app-header-area',
  templateUrl: './header-area.component.html',
  styleUrls: [ './header-area.component.scss' ]
})
export class HeaderAreaComponent {
  @Input() language: LanguageState;
  @Input() menu: MenuState;

  remaining: Time;
  hoursLeft: number;
  minutesLeft: number;
  secondsLeft: number;

  timeLeft(date) {
    // UTC times
    const utc_hours = date.getUTCHours();
    const utc_minutes = date.getUTCMinutes();
    const utc_seconds = date.getUTCSeconds();
    // End hour
    const end_hour = 20;
    // Difference in hours, minutes, seconds
    const difference_hours = (utc_hours <= end_hour) ? (end_hour - utc_hours) : (24 + end_hour) - utc_hours;
    const difference_minutes = 60 - (utc_minutes % 60) - 1;;
    const difference_seconds = 60 - (utc_seconds % 60) - 1;;
    return <Time>{
      hours: difference_hours,
      minutes: difference_minutes,
      seconds: difference_seconds,   
    }
  }

  constructor() {
    timer(0, 1000).subscribe(() => {
      const time = this.timeLeft(new Date());
      const { hours, minutes, seconds } = time;
      this.hoursLeft = hours;
      this.minutesLeft = minutes;
      this.secondsLeft = seconds;
    });

  }

}

接口时间{
小时数：个；
分钟：数字；
秒：数字；
}
@组成部分({
选择器：“应用程序标题区域”，
templateUrl:“./header area.component.html”，
样式URL:['./标题区域.component.scss']
})
导出类标题组件{
@Input（）语言：LanguageState；
@Input（）菜单：菜单自定义；
剩余：时间；
左小时：数字；
剩余分钟数：数字；
secondsLeft：数字；
时限（日期）{
//UTC时间
const utc_hours=date.getUTCHours（）；
常数utc_minutes=date.getUTCMinutes（）；
常数utc_seconds=date.getUTCSeconds（）；
//结束时间
施工结束时间=20小时；
//以小时、分钟、秒为单位的差异
常数差_小时=（utc_小时{
const time=this.timeLeft（新日期（））；
常数{小时，分钟，秒}=时间；
this.hoursLeft=小时；
this.minutesLeft=分钟；
this.secondsLeft=秒；
});
}
}

这是我的模板：

<span class="auctions-text">Auctions close in <b>{{ hoursLeft }} hours {{ minutesLeft }}m {{ secondsLeft }}s</b></span>

拍卖会在{{hoursLeft}}小时{{minutesLeft}}分{secondsLeft}秒后结束

---

所以，我的问题是，我如何利用RXJS定时器和其他操作符来返回一个可观察对象，这样我就可以在模板中的异步管道中使用它？

做一个基于秒的简单版本

const endHours = 20
const endSeconds = endHours * 60 * 60;
const countdown$ = Observable.timer(0, 1000)
  .map(x => endSeconds - x)
  .takeWhile(x => x > 0);

const hoursLeft$ = countdown$.map(x => calcHoursFromSecondsRemaining(x));
const minsLeft$ = countdown$.map(x => calcMinsFromSecondsRemaining(x));
const secsLeft$ = countdown$.map(x => calcSecondsFromSecondsRemaining(x));

<span>{{ hoursLeft$ | async }}</span>
<span>{{ minsLeft$ | async }}</span>
<span>{{ secsLeft$ | async }}</span>

const endHours=20
const endSeconds=endHours*60*60；
常量倒计时$=可观测计时器（0，1000）
.map（x=>endSeconds-x）
.takeWhile（x=>x>0）；
const hoursLeft$=倒计时$.map（x=>CalchoursFromSecondsResMaining（x））；
const minsLeft$=倒计时$.map（x=>calcminsfromssecondsremaining（x））；
const secsLeft$=倒计时$.map（x=>calcSecondsFromSecondsRemaining（x））；
{{hoursleet$| async}}
{{minsleet$| async}}
{{secsLeft$| async}