所有页面的直接函数调用均已实现指令

Question

在我的示例应用程序中，我有2页。两个页面都具有setTimeout功能。当我在页面之间切换时，功能不会停止。两个页面都在继续通话。

如何处理？

我的指令：

import { Directive, ElementRef, Renderer2 } from "@angular/core";

@Directive({
  selector:'[myDirective]'
})

export class flexibleMyDirective {
  constructor(private el:ElementRef, private renderer:Renderer2){

    function callFunction(){
      setTimeout( () => {
        console.log('hi');
        callFunction();
      },  1000);
    }

    callFunction();

  }
}

Live Demo-请查看更改页面的控制台。