▪️Angualr - Signals
2025-3-19
| 2025-3-27
字數 676閱讀時間 2 分鐘

概要

Signals 用來追蹤及管理應用程式狀態,進而來優化框架的渲染功能
主要是希望藉由 signals 來取代 rxjs 相關狀態管理
▪️
rxjs - 非同步事件處理工具
 
分為以下兩種類別:
  • WritableSignal<T> : 代表可被修改的狀態
  • Signal<T> : 代表不可被修改的狀態

函式介紹

signal() : 創建狀態 (WritableSignal<T>)

用來創建本地狀態,支援各種型別。
支援 set()update() 函示來更新狀態
 

自訂狀態偵測

signal() 預設是使用Object.is() 來判斷狀態是否改變,我們可以自訂
 

computed() : 根據其他 signal 來創建狀態 (Signal<T>)

會以其他 signal 作為依據,來創建狀態
不支援 set()update()
但因為是根據 signal 來進行創建,所以底層 signal 狀態改變, computed() 創建的狀態也會一併修改
 

set() : 修改狀態

修改狀態值 (Only for WritableSignal<T>)
 

update() : 根據前一狀態來修改

根據前一狀態來修改狀態值 (Only for WritableSignal<T>)
 

effect() : 當偵測到狀態更改時,自動觸發函示

如果我們撰寫 effect() 函示,他會偵測當前所創建的各個 Signal ,如有變更就觸發 callback
不要使用 effect() 來修改狀態 (callback 不要有 signal.set() 、update() 的情況在)
 
用法:
  1. constructor 中創立
    1. 使用 field
       

      .destroy()

      而他的生命周期跟component走,等於說 component 被註銷他也會被註銷。
      手動註銷可以使用 .destroy() 來手動註銷
       

      onCleanup

      effect() 有內建 onCleanup 參數來支援 effect() 註銷時、或第一次運行後再次偵測運行時要採取的行動
       

    2. Angular
    3. Azure Devops - Replace tokens 套件Prometheus - Install Server
      Loading...