Question

使用Angular5。

我正在进行实时聊天。

用户可以聊天直到倒计时达到0。

在第一个用户的输入上，countDown开始：

private engage_session() {

if(!this.is_engaged){

  this.countDown = Observable.timer(0, 1000)
    .take(this.counter)
    .map( () => --this.counter );   

  this.countDown.subscribe( remaining_credit => { this.remaining_credit = remaining_credit } );  
}

this.is_engaged = true;

}

我需要订阅countDown，以便我可以在另一个函数中使用它：

public sendMessage(message: Message): void
  {
    this.engage_session();

    if (!message) { return; }

    this.socketService.send({
      from: this.tokenUser.username,
      content: message,
      created_at: moment().format(),
      remaining_credit: this.remaining_credit || this.counter,
    });
    this.messageContent = null;
  }

我在模板中也有类似的东西：

 CountDown : <span class="badge badge-light">{{countDown | async | formatTime }}</span>

问题是：当我订阅countDown时，计时器的速度应该是原来的两倍。

但是当我删除该行时：

this.countDown.subscribe( remaining_credit => { this.remaining_credit = remaining_credit } );

然后倒计时工作正常..

感谢您的帮助=）

Answer 1

它的速度提高了两倍，因为您订阅了两次（async是您的第二个订阅）。我并不完全了解你的结构和实现，但我认为你可以这样做：

CountDown : <span class="badge badge-light">{{remaining_credit | formatTime }}</span>

如果此HTML来自创建countDown可观察

的组件

带有rxjsTimer / observable订阅的Angular Countdown

1 个答案: