1) Signals vs RxJS: Angular 16 で Signal 変数を最初から作成し、Observable と比較します。

サイドバー メニューとトップ メニューがある例では、ボタンを押すたびに、トップ メニューがサイドバー メニューを折りたたむように指示します。

RxJS の場合:

この通信はサブジェクトとオブザーバブルを使用するサービスで行われ、ボタンをクリックするたびに next が呼び出され、発行された値がサブスクライブされたオブザーバブルに渡されます。サイドバー メニュー コンポーネントは単にサブスクライブされ、HTML でこのプロパティを使用します。まず、サービス内に Subject を作成し、次にそこから Observable を作成し、next を呼び出して出力された値を渡します:

シグナルあり:

これはシグナルを使用して簡単に実行できます。シグナルは、特定の単純なケースでより良いパフォーマンスを実現するために Angular で作成されました。これらは @angular/core.

シグナルを宣言する必要があります。そのシグナルを更新するたびに、set を呼び出します。サイドバー メニュー コンポーネントでは、そのプロパティを参照するだけで済みます。HTML でシグナルを使用するには、値を取得するためにシグナルを括弧で囲む必要があります。これがシグナルの使用方法です。

更新を実行することもできます。これには、以前の値を知らせるという追加の利点があります。このために、前の値とその型を受け取るように指定し、アロー関数を使用して新しい値 (否定された新しい値) を示します:

オブザーバブルをシグナルに変換したり、シグナルをオブザーバブルに変換したりする方法もあります:

シグナルがサブジェクトの代わりになるというわけではありません。両方ともオブザーバブルと合わせてはるかに強力で、RxJS オペレーターなどの多くの機能を備えています (RxJS を使用すると、より詳細な制御が可能になります)。ただし、シグナルは簡単な操作方法を提供し、他のライブラリやフレームワークと共通です。

RxJS は Microsoft のライブラリであり、Angular ではありません。対照的に、Signals は Angular のライブラリであり、状態が変化したときにどの部分が変化したかを Angular が正確に認識できるため、より優れた制御とパフォーマンスを提供します。これにより、コンポーネント全体を再レンダリングする必要がなくなり、その特定の部分のみに焦点を当てることができます。

2) Angular 16 の RxJS から takeUntilDestroyed を使用してサブスクライブを解除する新しい簡素化された方法。

Angular では、observable のサブスクライブを解除することが重要です。例では、OnInit でサブスクリプションを保存し、OnDestroy でサブスクリプションを解除します。

古い方法は、サブスクリプションとともに変数を保存し、サブスクライブ時にその変数に保存し、OnDestroy でそのサブスクリプションを破棄することでした:

詳細な説明: タイプ Subscription (RxJS から) のプロパティが作成されます。このプロパティは ngOnInit で初期化され、サブスクリプションの作成時にサブスクリプションの参照が割り当てられます。次に、ngOnDestroy でサブスクリプションがキャンセルされます。コンポーネントがサブスクリプション変数を定義していない場合は、疑問符を使用して定義されているかどうかを確認するか、条件を使用してエラーを処理する必要があります。

RxJS オペレーター takeUntilDestroyed を使用することで、OnDestroy やサブスクリプション変数を作成せずに、これをより簡単に実行できるようになりました。これにより、コンポーネントが破棄される直前にサブスクリプションが自動的にキャンセルされます。 DestroyRef サービスを挿入して渡すことが重要です。そうすることで、コンポーネントがいつ破棄されたかを知ることができます:

詳細な説明: ここで、サブスクライブを解除していない場合は、RxJS パイプを追加し、それに takeUntilDestroyed() という NEW 演算子を送信します。これには、サービス (@angular から) である destroyedRef を渡す必要があります。 /core) をコンストラクターに注入できます。

例: サイドバー サービスでは、ナビゲーション バー コンポーネントのボタンのクリックをリッスンします。 takeUntilDestroyed() を使用すると、コンポーネントが破棄された場合にのみサブスクライブを解除し、複数のサブスクリプションを回避します。この場合、ボタンが押されたかどうかを常に監視する必要があります。したがって、コンポーネントが破棄された場合にのみサブスクライブを解除する必要があります。

これを行うことが重要です。そうしないと、他のコンポーネントにいてもリッスンし、コンポーネントが破棄されるためアプリを閉じた場合にのみサブスクライブが解除されます。これが常にアクティブである場合、ページ コンポーネントを移動するときに、たとえば最初のナビゲーションでサブスクライブし、次に別のページに移動し、最初のページに戻ると 2 番目のサブスクリプションになるため、これは非常に重要です。その結果、2 つのアクティブなサブスクリプションが発生します。したがって、購読を解除することが重要です。

重要な注意事項: HTTP リクエストをサブスクライブする場合、これは自動的に行われるため、サブスクライブを解除する必要はありません。

3) Angular での信号の影響。シグナルの変更をリッスンしています。

例では、ブール値を返すシグナルがあり、以下のメソッドでは、更新で更新されます:

信号が変化するたびにアラートを受け取りたいと想像してください。信号はこの方法だけでなく、さまざまな場所から変化します。変化するたびに何かを実行したい場合は、エフェクトを使用してこれを行うことができます。この関数はシグナルを受け取り、それが変化するかどうかをチェックして、エフェクト内のメソッドを自動的に実行します:

これにより、たとえば、コンソール ログの代わりに値をローカル ストレージに保存し、その値でインスタンス化することができます。これは、未知のコードを操作する場合や、変更されている箇所の数が不明な場合に特に便利です。

— EfisioDev の Angular コースに基づくメモ —