了解角度訊號：綜合指南

本指南探討了 Angular Signals，這是一種簡化狀態管理的現代反應式程式設計範例。 我們將檢查它們的核心功能，包括可寫入和計算訊號，並演示它們的使用效果。 實際例子將鞏固你的理解。

理解角度訊號

Angular Signals 是一種響應式原語，旨在實現更可預測和更易於管理的狀態。與舊方法（Observables、EventEmitters）不同，訊號提供了一種更清晰的反應變數方法，可以自動更新狀態變化的視圖。

關鍵訊號屬性：

• 同步更新：訊號變化立即反映。
• 依賴追蹤： Angular 自動追蹤元件和指令內的訊號相依性。
• 直覺用法：與 Observable 相比，訊號簡化了狀態管理。

可寫入訊號：基礎

可寫入訊號是基本構建塊，代表可變的反應狀態。

建立可寫入訊號：

使用signal()功能：

<code class="language-typescript">import { signal } from '@angular/core';

export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}</code>

可寫入訊號方法：

1. set(newValue)：直接賦值新值。 this.counter.set(10);
2. update(callback)：使用回呼函數更新。 this.counter.update(val => val * 2);
3. mutate(callback)：直接改變物件或陣列。 this.arraySignal.mutate(arr => arr.push(5));

計算訊號：派生值

計算訊號從其他訊號中取得其值，並在依賴關係變更時自動更新。 它們是唯讀的。

定義計算訊號：

使用computed()功能：

<code class="language-typescript">import { signal, computed } from '@angular/core';

export class PriceCalculator {
  price = signal(100);
  quantity = signal(2);
  totalPrice = computed(() => this.price() * this.quantity());
}</code>

更新price或quantity會自動重新計算totalPrice。

效果：管理副作用

當訊號改變時，Effects 會執行副作用（日誌記錄、API 呼叫、DOM 操作）。

創造效果：

使用effect()功能：

<code class="language-typescript">import { signal, effect } from '@angular/core';

export class EffectExample {
  counter = signal(0);

  constructor() {
    effect(() => console.log('Counter:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }
}</code>

效果用例：

• 控制台日誌記錄
• HTTP 請求
• 外部 DOM 操作

完整範例：計數器應用程式

這個計數器應用程式示範了可寫入、計算的訊號和效果：

<code class="language-typescript">import { Component, signal, computed, effect } from '@angular/core';

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

  constructor() {
    effect(() => console.log('Counter changed:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}</code>

訊號最佳實務：

1. 最小化影響：保持副作用簡潔。
2. 使用計算訊號：對於派生狀態，更喜歡computed()。
3. 避免過度突變：優先考慮 update() 而不是 mutate()。
4. 與依賴注入結合：將訊號與服務整合以實現可擴展性。

結論

Angular Signals 提供了一種現代、高效的反應式狀態管理方法。它們的簡單性和功能增強了開發人員體驗和應用程式效能，從而產生更可維護和可預測的 Angular 程式碼。

以上是了解角度訊號：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！