effect()

將一個變數設置成 signal() 之後，Angular 會自動追蹤它的變化，並在 UI 中反映這些變動。然而，在 TypeScript 程式碼中，單純使用 signal() 只會獲取當下的值，而不會設置自動監聽。

比如以下這個情境，constructor 中的 console.log 只會執行一次並顯示初始值 'online'：

currentStatus = signal<'online' | 'offline' | 'unknown'>('online');

constructor() {
  console.log(this.currentStatus()); // 只會在元件建立時執行一次
}

ngOnInit(): void {
  const intervalId = setInterval(() => {
    const rnd = Math.random(); // 0 ~ 0.99999
    if (rnd < 0.5) {
      this.currentStatus.set('online');
    } else if (rnd < 0.9) {
      this.currentStatus.set('offline');
    } else {
      this.currentStatus.set('unknown');
    }
  }, 3000);
  
  this.destroyRef.onDestroy(() => {
    clearInterval(intervalId);
  });
}

如果想在 TypeScript 中監聽 signal 的變化，要使用 effect(() => {}) 函式：

constructor() {
  effect(() => {
    console.log(this.currentStatus());
  });
}

effect 接收一個函式作為參數，Angular 會自動追蹤這個函式內使用的所有 signals，並在任何一個 signal 變化時重新執行這個函式。在上面的例子中，每當 currentStatus 的值改變時，effect 內的函式就會重新執行，印出最新的狀態值。