角度

Question

我使用了这个例子中的倒计时解决方案：斯塔克布利茨 --它来自于这个有个问题。的公认答案。

不同的是，我不使用html输入来重置计时器，而是使用这样的Websocket消息(开关就是区别)：

转向定时器.定向.turn：

@Directive({
  selector: '[counter]'
})
export class CounterDirective implements OnChanges, OnDestroy {

  private counter$ = new Subject<any>();
  private countSub$: SubscriptionLike;

  @Input() counter: number;
  @Input() interval: number;
  @Output() value = new EventEmitter<number>();

  constructor(private client: ClientService)
  {

    this.countSub$ = this.counter$.pipe(
      switchMap((options: any) =>
        timer(0, options.interval).pipe(
          take(options.count),
          tap(() => this.value.emit(--options.count))
        )
      )
    ).subscribe();

    this.client.messages.subscribe(msg =>
    {
      switch (msg.SUBJECT)
      {
        case 'TT_UPDATE':
        {
          this.counter = msg.COUNTER;
        }
        break;
        default:
        break;
      }
    });
  }

  ngOnChanges() {
    this.counter$.next({ count: this.counter, interval: this.interval });
  }
  ngOnDestroy() {
    this.countSub$.unsubscribe();
  }
}

这根本没有重置计时器，所以我尝试将消息发送到初始组件，但只有在第一次发送定时器时才重新设置定时器。

转计时器。组件。turn：

@Component({
  selector: 'app-turn-timer',
  templateUrl: './turn-timer.component.html', 
  styleUrls: ['../../../../angry_styles.css']
})

export class TurnTimerComponent implements OnInit
{
    public counter : number = 60;
    interval = 1000;
    public current_player: string;

    constructor (private ll: LL, private client: ClientService, private players: PlayersInfo)
    {
        this.client.messages.subscribe(msg =>
        {
            switch (msg.SUBJECT)
            {
                case 'TT_UPDATE':
                {
                    this.counter = msg.COUNTER;
                    this.current_player = msg.PLAYER_ON_TURN;
                }
                break;
                default:
                break;
            }
        });
    }
    ngOnInit(): void {}
}

这里有html：

<ng-container [counter]="counter" [interval]="interval" (value)="value = $event">
    <span>{{ value }}</span>
</ng-container>

答案的原作者

<input type="number" [(ngModel)]="counter"/>

在他的html和它的每一次值

<input>

更改后，倒计时定时器被重新设置为该值。但是，在我的应用程序中，它应该由发送Websocket消息的C#服务器重新设置。

，所以我所期望的结果是：在每个"TT_UPDATE“消息上，我期望HTML中的{{ TT_UPDATE}改变为msg.COUNTER的值，然后this.counter$.pipe会减少{TT_UPDATE}。效果很好。只是重发部分不起作用。

顺便说一句。每个消息都被成功地接收到了，我检查了字段的名称。以下是消息的定义：

export interface Message {
  SUBJECT: string;
  COUNTER?: number;       // This is the problematic field.
  PLAYER_ON_TURN?: string;
}

@Injectable()
export class ClientService
{
  public messages: Subject < Message > ;

  constructor(wsService: WebsocketService) {
    this.messages = < Subject < Message >> wsService
      .connect(CHAT_URL).pipe(
        map((response: MessageEvent): Message => {
          console.log(response);
          const data = JSON.parse(response.data);
          return data;
      }), share());
  }

我从代码中删除了导入和路径，这样它就更短了，但是它们是正确的。在浏览器控制台中也没有发现错误。

Answer 1

最后，我自己找到了解决办法。我甚至不需要this.counter。我修改了在收到消息后发生的事情：

this.client.messages.subscribe(msg =>
{
  switch (msg.SUBJECT)
  {
    case 'TT_UPDATE':
    {
      this.ResetTimer(msg.COUNTER);    // THIS IS NEW !!!
    }
    break;
    default:
    break;
  }
});

}

然后，我创建了一个新方法，将倒计时计时器重置为从消息接收到的值：

ResetTimer(updatedValue: number)
  {
    this.counter$.next({ count: updatedValue, interval: this.interval });
  }

因为我不改变间隔，所以我让它保持不变。有时我想知道事情是怎么容易的。