用于跟踪过程状态的Angular 2 / Observable代码模式

Question

我使用Angular 2 CLI和Firebase继承了一个Web解决方案，我正在尝试清理代码。这是一个简单的游戏，使用此代码来保持用户同步。

这是用户端的代码，用于跟踪游戏状态......

  ngDoCheck(){
    if(this.subGame['game_state'] == 'question'){
      this.setAnswerStart();
    }else if(this.subGame['game_state'] == "answer"){
      this.updateGame();
    }else if(this.subGame['game_state'] == 'leaderboard'){

      this.startTime = null;
      console.log("Question timer was reset to ZERO");
    }
  }

subGame对象是对Firebase实时数据库的订阅，游戏正在设置game_state属性以使所有用户保持同步。

游戏通过这样的测验过程：

1. 问题：显示问题
2. 答案：显示答案
3. 排行榜：显示 分数
4. [REPEAT]

问题在于，因为它正在使用ngDoCheck挂钩跟踪状态，它会在游戏对象发生变化时随时触发这些事件。 setAnswerStart方法跟踪用户查看问题的时间，但在此代码中，只要用户向DB提交响应，它就会被触发...所以它的读取时间不是很准确。

我希望有人在这里可以向我展示一种用于跟踪像这样的状态对象的编码模式，当开发人员需要像这样跟踪一步一步的过程时。如果我有办法为事件发生时设置一个监听器，如“if（从步骤1到步骤2）”那将非常有用

Answer 1

是的，您可以使用BeheviorSubject或其他EventEmitter，例如：

state = 'waiting';
checkState: BehaviorSubject<any> = new BehaviorSubject(this.state);

然后当您的用户提交问题时，只需在检查表单后执行this.checkState.next('submitted')。

然后在你的ngOnInit（）中订阅状态：

this.checkState.subscribe((state) => 
   {
     this.state = state;
   });