Angular の新機能: シグナル

Angular 愛好家の皆さん、こんにちは!今日は、Angular の最新かつ最も優れた機能の 1 つであるシグナルを皆さんと共有できることを嬉しく思います。あなたが私と同じで、コードをより効率的で管理しやすくする方法を常に探している人であれば、これを気に入るはずです。

シグナルとは何ですか?
簡単に言えば、シグナルは Angular アプリケーションでデータ変更を処理する新しい方法です。従来、データ変更の処理にはサービス、RxJS、または状態管理ライブラリを使用していました。シグナルは、コンポーネント内のデータ変更を追跡し、それに対応するためのより簡単かつ効率的な方法を提供します。

シグナルを使用する理由
シグナルの使用方法を説明する前に、シグナルを使用する理由について話しましょう。理由はいくつかあります:

1. シンプルさ: シグナルにより、データ変更の管理と追跡が容易になります。
2. パフォーマンス: シグナルは、不必要な再レンダリングを削減することでパフォーマンスの最適化に役立ちます。
3. 反応性: データ変更を処理するための、より反応的で宣言的なアプローチを提供します。

シグナルの使用を開始する
実際に手を動かして、Angular アプリケーションでシグナルを使用する方法を見てみましょう。

ステップ 1: Angular をインストールする (まだインストールしていない場合)
まず、Angular がインストールされていることを確認してください。そうでない場合は、Angular CLI を使用してインストールできます:

npm install -g @angular/cli

次に、新しい Angular プロジェクトを作成します。

ng new angular-signals-demo
cd angular-signals-demo

ステップ 2: シグナルの設定
Signals を使用するには、@angular/signals パッケージをインストールする必要があります。次のコマンドを実行します:

npm install @angular/signals

ステップ 3: コンポーネントでシグナルを使用する

ここで、Signals を使用する単純なコンポーネントを作成しましょう。まず、新しいコンポーネントを生成します:

ng generate component signal-demo

生成された signal-demo.component.ts ファイルを開き、次のように変更します。

import { Component, Signal } from '@angular/core';

@Component({
  selector: 'app-signal-demo',
  templateUrl: './signal-demo.component.html',
  styleUrls: ['./signal-demo.component.css']
})
export class SignalDemoComponent {
  countSignal = new Signal<number>(0);

  increment() {
    this.countSignal.update((currentValue) => currentValue + 1);
  }

  decrement() {
    this.countSignal.update((currentValue) => currentValue - 1);
  }
}

この例では、カウンター値を保持するために countSignal を作成しました。シグナルの値を更新するための、インクリメントとデクリメントという 2 つのメソッドもあります。

ステップ 4: シグナルをテンプレートにバインドする
次に、シグナルをテンプレートにバインドしましょう。 signal-demo.component.html を開き、次のように更新します:

<div>
  <h1>Counter: {{ countSignal.value }}</h1>
  <button (click)="increment()">Increment</button>
  <button (click)="decrement()">Decrement</button>
</div>

ここでは、countSignal の値を表示し、インクリメント メソッドとデクリメント メソッドをボタンにバインドします。

実際の信号の表示
次に、アプリケーションを実行して、シグナルの動作を確認してみましょう。次のコマンドを使用して、Angular 開発サーバーを起動します:

ng serve

ブラウザで http://localhost:4200 に移動すると、カウンター コンポーネントが表示されるはずです。ボタンをクリックすると、カウンターの更新がリアルタイムで表示されます!

結論
それでおしまい！ Angular の新しいシグナル機能の使用方法を学習しました。シグナルは、Angular アプリケーションでリアクティブなデータを管理するためのシンプルかつ効率的な方法を提供します。コードの読みやすさとパフォーマンスの向上に役立ちます。

このシグナルの紹介がお役に立てば幸いです。ご質問がある場合、または Signals に関するご経験を共有したい場合は、お気軽に以下にコメントを残してください。コーディングを楽しんでください!

以上がAngular の新機能: シグナルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。