計算訊號中的錯誤快取是 Angular 19.1.2 中的新功能。當 equal 函數拋出錯誤時，計算訊號會快取該錯誤。當讀取該值時，計算訊號會拋出錯誤，從而停止 computed 和 equal 函數的重新運行。
HTML 模板顯示計算訊號的最後一個成功值，直到錯誤清除。當 computed 函數和 equal 函數重新運行時沒有錯誤，計算訊號將清除錯誤。
由於計算訊號會拋出快取錯誤，因此依賴它的訊號直到錯誤清除後才會更新。
connieleung
badLuck = signal(0);
numBadNumberRun = 0;
numBadNumberEqualRun = 0;
badLuckComputed = computed (() => {
this.numBadNumberRun = this.numBadNumberRun + 1;
return this.badLuck();
}, {
equal: (_, b) => {
this.numBadNumberEqualRun = this.numBadNumberEqualRun + 1;
if ([4, 14, 24, 44].includes(b)) {
throw new Error("Bad number thrown");
}
return false;
}});
incrementBadLuck() {
this.badLuck.update((prev) => prev + 1);
}
<p>Bad Luck computed: {{ badLuckComputed() }}, Number of executions: {{ numBadNumberRun }}, Number of equal executions: {{ numBadNumberEqualRun }}</p>
<hr />
badLuck 是一個儲存整數的訊號。當使用者點擊按鈕時，訊號增加1。 badLuckComputed 是一個傳回 badLuck 值的計算訊號。當 badLuck 不幸時，equal 函數會拋出錯誤，並且 badLuckComputed 計算訊號會將其快取。例如，badLuckComputed 在 badLuck 為 4 時快取錯誤，HTML 模板顯示 badLuck（4）和 badLuckComputed（3）。 當使用者點擊按鈕時，badLuck 變成 5，equal 函數傳回 false 而不是錯誤。 badLuckComputed 的錯誤被清除，並且 badLuck 和 badLuckComputed 都顯示 5。
sumOfLuck = computed(() => this.badLuckComputed() + this.count())
sumOfLuck 是計算訊號，等於 badLuckComputed 和 count 訊號的總和。 當任何一個訊號改變時，sumOfLuck 計算訊號會得到一個新值，除非 badLuckComputed 訊號快取了錯誤。
當 sumOfLuck 的計算函數運行時，badLuckComputed 計算訊號會拋出錯誤，且訊號不會更新。 當 count 訊號更新時也會發生同樣的事情。 sumOfLuck 的 computed 函數評估 badLuckComputed，並拋出錯誤。因此，sumOfLuck 計算訊號不會更新。
當 badLuckComputed 計算訊號更新時，它會清除錯誤。 sumOfLuck 的 computed 函數運行並評估 badLuckComputed 和 count 訊號。 函數在執行時間沒有錯誤，且 sumOfLuck 計算訊號儲存新的總數。
equal 函數不追蹤訊號。假設組件其他部分修改訊號值；computed 和 equal 函數不會重新運行。 當追蹤的訊號導致 computed 和 equal 函數重新運行時，新的訊號值有效。
此示範計算原始文字和新文字之間的相似度得分。當兩個文字相似時，upperSimilarText 的計算訊號會以大寫形式顯示新文字。 equal 函數呼叫 javascript 函式庫來計算分數並與 minSimilaryScore 訊號進行比較。 使用者點擊按鈕可以將 minSimilarityScore 減少或增加 0.05。當 minSimilarityScore 訊號透過按鈕點選更新時，upperSimilarText 計算訊號不會重新運作。
npm install string-similarity-js
安裝 string-similarity-js 比較兩個字串並傳回相似度分數。
getSimilarScore(b: string) {
return stringSimilarity(this.originalText, b);
}
minSimilarityScore = signal(0.5);
readonly originalText = 'The quick brown fox jumps over the lazy dog';
readonly delta = 0.05;
text = signal(this.originalText);
score = computed(() => this.getSimilarScore(this.text()));
<div>
<input style="width: 100%;" [(ngModel)]="text" />
</div>
<div>score: {{ score() }}</div>
模板有一個輸入字段，新文字儲存在 text 訊號，並將相似度分數儲存在 score 計算訊號中。。
modify(amount: number) {
this.minSimilarityScore.update((prev) => Math.max(0, Math.min(1, prev + amount)));
}
<button (click)="modify(-delta)">Reduce the minimum similarity score by {{ delta }}</button>
<button (click)="modify(delta)">Add the minimum similarity score by {{ delta }}</button>
當使用者點擊按鈕時，minSimilarityScore 訊號會增加或減少0.05。
upperSimilarText = computed(() => {
this.numComputedRun = this.numComputedRun + 1;
return this.text().toUpperCase();
}, {
equal: (_, b) => {
this.numEqualRun = this.numEqualRun + 1;
this.getSimilarScore(b) < this.minSimilarityScore();
}});
<div>
<p>{{ upperSimilarText() }}</p>
<p>numComputedRun: {{ numComputedRun }}, numEqualRun: {{ numEqualRun }}</p>
</div>
當使用者在文字方塊中輸入新文字時，score 的 computed 函數會重新運行以計算新的相似度分數。當相似度分數小於 minSimilarityScore 的值時，upperSimilarText 的 computed 函數也會重新運行並更新。
當使用者點擊按鈕來改變 minSimilarityScore 的值時，upperSimilarText 不會重新運行，因為其 equal 函數不會追蹤訊號。當使用者在文字方塊中輸入新文字時，upperSimilarText 計算訊號會重新運行並在 equal 函數中使用 minSimilarityScore 訊號的新值。
以上就是我對計算訊號的錯誤快取與 equal 函數中追蹤訊號的分享。
iThome鐵人賽
看影片追技術
