Signal?

Signal 是 Angular 17 引入的一種新的響應式狀態管理工具,

可以追蹤應用中的狀態變化,

並在發生變化時 自動更新依賴該狀態的元件,

Signal 本質上是一個物件(封裝你給的物件型別 Signal<T>),

當 Signal 偵測到值變更時,

所有依賴該值的部分都會被自動通知,

觸發重新渲染,

使用方式

import { signal } from "@angular/core";

// 創建一個初始值為 0 的信號
const count: Signal<number> = signal(0);

// 讀取信號的值, 要加上括號即可取值
console.log(count()); // Output: 0

// 更新信號的值
count.set(5);
console.log(count()); // Output: 5

// 另一種更新信號的值的方式, 取得舊值, 並返回新值
count.update((prev) => prev + 1);
console.log(count()); // Output: 6

Writable Signal & Read-Only Signal？

Writable Signal 允許你直接更新它的值,

通過 .set() 或 .update() 方法來改變信號的狀態

const count = signal(0);
count.set(3); // 設置新值為 3
count.update((value) => value + 1); // 將目前的值加 1

Read-Only Signal 依賴其他 Signal 的值,

並且它的值 無法被直接修改,

使用 computed() 方法來定義這個 signal,

const count = signal(2);
const doubleCount = computed(() => count() * 2); // 這個 signal 依賴 count 的值
console.log(doubleCount()); // Output: 4

當 count 的值改變時, doubleCount 也會自動更新

Signal 的應用場景

Angular 17 之後更新了 Signal 這個新特性,

並且推薦使用 Signal 來管理應用的狀態,

  • 狀態管理, 可以用來 管理單一狀態, 並將狀態變更 自動反映 在 UI 上

  • 減少 subscribe() 和 unsubscribe() 的複雜性, 與 Observable 相比, Signal 不需要手動訂閱和管理訂閱的工作

  • 提升性能, 在使用 ChangeDetectionStrategy.OnPush 策略時, Signal 能讓元件僅在狀態變更時更新, 提高應用性能

建立一個簡單的計數器

讓我們用 Signal 建立一個簡單的計數器

  • 建立 count Signal, 並初始化為 0

  • 使用按鈕更新 count 的值

  • 顯示 count 的值並計算兩倍的值

@Component({
  selector: "app-counter",
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <p>Double Count: {{ doubleCount() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);

  increment() {
    this.count.update((value) => value + 1);
  }
}