Angular - linkedSignal の概要

Angular 19 は間もなく登場し、多数のエキサイティングな新機能をもたらします。最も注目すべき追加機能の 1 つは linkedSignal プリミティブです。これは、Angular アプリケーションでリアクティブ プログラミングを処理する方法に革命をもたらすことを約束します。

リセットパターンの問題

従来、Angular でリセット パターンを実装するには、computed() シグナルを使用する必要がありました。このアプローチは効果的ではありますが、限界もあります。シグナルの値を明示的に設定する必要がある場合、シグナルは読み取り専用シグナルとなり、柔軟性が妨げられます。

linkedSignal ソリューション

linkedSignal は、ソース信号への変更に基づいて値を自動的に更新する書き込み可能な信号を提供することで、この制限に対処します。これにより、両者の間でシームレスな同期が確立され、不具合のないユーザー エクスペリエンスが保証されます。

linkedSign を理解する

linkedSignal には複数のオーバーロードがありますが、そのうちの 2 つは言及する価値があります:

• ソースと計算を含むリンクされた信号

このオーバーロードを使用すると、ソース信号の値に基づいて値を計算する linkedSignal を作成できます。以下に例を示します:

import { signal, linkedSignal } from '@angular/core';

  const sourceSignal = signal(0);
  const linkedSignal = linkedSignal({
    source: this.sourceSignal,
    computation: () => this.sourceSignal() * 5,
  });

この例では、linkedSignal は常にsourceSignal の値の 2 倍になります。 sourceSignal が変更されるたびに、linkedSignal はその値を自動的に再計算します。以下は、linkedSignal のより現実的な例です:

CourseDetailComponent コンポーネントは、入力として courseId を受け取り、登録済みの学生の数を表示します。選択した courseId が変更されるたびに生徒数をリセットすることを目指しています。これには、courseId とstudentCount という 2 つのシグナルを同期するメカニズムが必要です。

computed() の使用は他の信号から値を導出するのに効果的ですが、それらは読み取り専用です。 courseId の変更に基づいて StudentCount を動的に更新するには、linkedSignal プリミティブを利用します。 courseId にリンクされた書き込み可能なシグナルを作成することで、studentCount を明示的に設定し、courseId が変更されるたびに自動的に更新することができます。このアプローチは、信号の依存関係を管理し、データの一貫性を確保するための堅牢かつ柔軟なソリューションを提供します。

• linkedSignal 省略表記

より単純なシナリオでは、短縮構文を使用して linkedSignal を作成できます。

const sourceSignal = signal(10);
const linkedSignal = linkedSignal(() => sourceSignal() * 2);

この短縮構文は最初のオーバーロードと同等ですが、より簡潔で読みやすくなっています。

LinkedSignals の主な利点

• 簡素化されたリセット パターン: computed() 信号の複雑さを必要とせずに、リセット パターンを簡単に実装できます。
• 柔軟性の強化: 自動更新を確保しながら、信号値を明示的に設定する機能を維持します。
• パフォーマンスの向上: 効率的なアップデートのために内部で最適化されています。
• よりクリーンなコード: 特に複雑なリアクティブ シナリオ向けに、より簡潔で読みやすいコード。

結論

linkedSignal は、Angular のリアクティブ ツールキットの強力な新しいツールです。その中心的な概念と使用パターンを理解することで、より堅牢で応答性が高く、ユーザーフレンドリーな Angular アプリケーションを作成できます。 linkedSignal は、computed() 信号と書き込み可能な信号の最良の側面を組み合わせる機能により、Angular 開発者にとって不可欠なツールになる予定です。 linkedSignals について詳しくは、この stackblitz から学ぶことができます。

以上がAngular - linkedSignal の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。