setInterval函數也在Angular 6中的其他組件中運行

Question

我是Angular的新手（6）。 我在組件中使用setInterval函數。 它正在工作但是當我導航到另一個路由時， setInterval繼續執行。 請幫我確定一下原因。

//Calling it in ngOnit()
autosavedraftsolution() {
      setInterval(() => {
        console.log(this.draftSolutionForm);
        if (this.solutionTitleValid) {
          this.savedraftsolution();
        }
      }, this.autoSaveInterval);
    }

//savedraftsolution()
  savedraftsolution() {
    console.log("saving..");

    this.connectService.saveDraftSolution({
      Title: this.draftSolutionForm.get('Title').value,
      Product: this.draftSolutionForm.get('Product').value
    } as Draftsolution).subscribe(draftsol => {
      console.log("saved");

    });
  }

它一直在控制台中顯示“保存...”和“已保存”消息。

Answer 1

組件卸載時，需要調用clearInterval來停止它：

this.intervalId = setInterval(...);

卸載組件時：

ngOnDestroy() {
  clearInterval(this.intervalId);
}

Answer 2

多米尼克是對的。 您必須清除組件被銷毀時的間隔。 你可以做這樣的事情

ngOnInit(){
    this.saveInterval = setInterval(() => {}, 1000)
}

ngOnDestroy(){
    clearInterval(this.saveInterval)
}

確保您的組件實現OnInit和OnDestroy。