初めてのシグナルの作成と更新

Angularシグナルチュートリアルへようこそ！シグナルは、状態を管理し、その状態が変化したときにUIを自動的に更新する方法を提供するAngularのリアクティブプリミティブです。

このアクティビティでは、以下の方法を学びます。

• signal()関数を使用して初めてのシグナルを作成する
• テンプレートでその値を表示する
• set()およびupdate()メソッドを使用してシグナル値を更新する

シグナルを使ってインタラクティブなユーザー状態システムを構築しましょう！

1. signal関数をインポートする

   コンポーネントファイルの先頭で、@angular/coreからsignal関数をインポートします。

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

2. コンポーネントでシグナルを作成する

   コンポーネントクラスに、'offline'の値で初期化されるuserStatusシグナルを追加します。

   @Component({  /* Config omitted */})export class App {  userStatus = signal<'online' | 'offline'>('offline');}

3. テンプレートでシグナル値を表示する

   現在のユーザー状態を表示するようにステータスインジケーターを更新します。

   1. [class]="userStatus()"を使用してシグナルをclass属性にバインドする
   2. ???を{{ userStatus() }}に置き換えてステータステキストを表示する

   <!-- Update from: --><div class="status-indicator offline">  <span class="status-dot"></span>  Status: ???</div><!-- To: --><div class="status-indicator" [class]="userStatus()">  <span class="status-dot"></span>  Status: {{ userStatus() }}</div>

   シグナルuserStatus()を括弧付きで呼び出してその値を読み取る方法に注目してください。

4. シグナルを更新するメソッドを追加する

   コンポーネントに、set()メソッドを使用してユーザー状態を変更するメソッドを追加します。

   goOnline() {  this.userStatus.set('online');}goOffline() {  this.userStatus.set('offline');}

   set()メソッドは、シグナルの値を新しい値で完全に置き換えます。

5. コントロールボタンを接続する

   ボタンはすでにテンプレートにあります。次に、以下を追加してメソッドに接続します。

   1. (click)によるクリックハンドラー
   2. すでにその状態である場合の[disabled]による無効状態

   <!-- Add bindings to the existing buttons: --><button (click)="goOnline()" [disabled]="userStatus() === 'online'">Go Online</button><button (click)="goOffline()" [disabled]="userStatus() === 'offline'">Go Offline</button>

6. update()を使用したトグルメソッドを追加する

   オンラインとオフラインを切り替えるtoggleStatus()メソッドをupdate()メソッドを使用して追加します。

   toggleStatus() {  this.userStatus.update(current => current === 'online' ? 'offline' : 'online');}

   update()メソッドは、現在の値を受け取り、新しい値を返す関数を取ります。これは、現在の状態に基づいて既存の値を変更する必要がある場合に便利です。

7. トグルボタンハンドラーを追加する

   トグルボタンはすでにテンプレートにあります。それをtoggleStatus()メソッドに接続します。

   <button (click)="toggleStatus()" class="toggle-btn">Toggle Status</button>

おめでとうございます！初めてのシグナルを作成し、set()とupdate()の両方のメソッドを使用して更新する方法を学びました。signal()関数は、Angularが追跡するリアクティブな値を作成し、それを更新すると、UIが自動的に変更を反映します。

次に、computedを使用してシグナルから状態を派生させる方法を学びます！