角度のリンクされた信号

Angular 19 では、linkedSignal 機能により、計算されたロジックとの同期を維持するリアクティブ変数が導入されています。これは、反応性を強化し、コードベースを簡素化する強力な追加機能です。

linkedSign の仕組み

linkedSignal は、提供された計算関数から値を導出することで機能します。操作方法は次のとおりです:

1. 計算関数: linkedSignal に関数を指定すると、その結果が linkedSignal の値になります。
2. 自動更新: 計算への入力が変更されるたびに、linkedSignal が自動的に更新されます。
3. 手動更新: linkedSignal の値を手動で変更することもできます。

---

使用例

const shippingOptions = signal(['Ground', 'Air', 'Sea']);
const selectedOption = linkedSignal(() => shippingOptions()[0]);

ステップバイステップ:

1. 初期値:

console.log(selectedOption()); // 'Ground'

selectedOption は、shippingOptions の最初の項目にリンクしているため、「Ground」で始まります。

1. 手動更新:

selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'

selectedOption を手動で 'Sea' に設定します。これは配列の 3 番目のオプションです。

1. 依存関係の変更時の自動更新:

shippingOptions.set(['Email', 'Will Call', 'Postal service']);
console.log(selectedOption()); // 'Email'

shippingOptions が変更されると、linkedSignal が再計算されます。これで、新しい最初のオプション「電子メール」が反映されます。

これは、カスタム計算関数で linkedSignal を使用する例です
≈
温度を摂氏と華氏の両方で管理したいとします。 linkedSignal を使用すると、カスタム関数を通じて華氏を摂氏にリンクした状態に保つことができます。

const celsius = signal(25); // Base signal for temperature in Celsius
const fahrenheit = linkedSignal(() => celsius() * 9/5 + 32); // Compute Fahrenheit from Celsius
console.log(fahrenheit()); // 77 (25°C in Fahrenheit)
// Change the Celsius value
celsius.set(30);
console.log(fahrenheit()); // 86 (30°C in Fahrenheit)
// Manually update Fahrenheit (breaks auto-link temporarily)
fahrenheit.set(100);
console.log(fahrenheit()); // 100
console.log(celsius()); // Still 30, as Fahrenheit is overridden
// Change Celsius again to reset linkage
celsius.set(0);
console.log(fahrenheit()); // 32 (0°C in Fahrenheit)

なぜ使用するのか?

状態を同期させる: linkedSignal が常にその計算の最新の状態と一致するようにします。
便利: 依存関係が変更されたときに linkedSignal を手動で更新する必要はありません。自動的に更新されます。
柔軟性: 必要に応じて、その値を手動でオーバーライドできます。

重要なポイント:

linkedSignal はその値を何らかのロジックに結び付けるため、ロジックが変更されても自動的に最新の状態に保たれます。これは、ある状態が別の状態に依存するシナリオに最適です。

以上が角度のリンクされた信号の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。