角度信号を理解する: 包括的なガイド-jsチュートリアル-php.cn

角度信号を理解する: 包括的なガイド

Linda Hamilton

リリース： 2025-01-18 18:32:11

オリジナル

760 人が閲覧しました

Understanding Angular Signals: A Comprehensive Guide

このガイドでは、状態管理を簡素化する最新のリアクティブプログラミングパラダイムである Angular Signals について説明します。書き込み可能信号や計算信号などのコア機能を調べ、エフェクトでの使用法を示します。実践的な例により理解が深まります。

角度信号を理解する

Angular Signals は、状態をより予測可能かつ管理しやすいように設計されたリアクティブプリミティブです。古いメソッド (Observables、EventEmitters) とは異なり、シグナルはリアクティブな変数に対するよりクリーンなアプローチを提供し、状態の変化に関するビューを自動的に更新します。

主要信号属性:

同期更新: 信号の変更はすぐに反映されます。
依存関係の追跡: Angular は、コンポーネントおよびディレクティブ内の信号の依存関係を自動的に追跡します。
直感的な使用法: シグナルは、Observable と比較して状態管理を合理化します。

書き込み可能な信号: 基本

書き込み可能なシグナルは基本的な構成要素であり、変更可能な反応状態を表します。

書き込み可能な信号の作成:

signal() 関数を使用します:

<code class="language-typescript">import { signal } from '@angular/core';

export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}</code>

ログイン後にコピー

書き込み可能な信号メソッド:

set(newValue): 新しい値を直接割り当てます。 this.counter.set(10);
update(callback): コールバック関数を使用して更新します。 this.counter.update(val => val * 2);
mutate(callback): オブジェクトまたは配列を直接変更します。 this.arraySignal.mutate(arr => arr.push(5));

計算された信号: 導出値

計算された信号は他の信号から値を取得し、依存関係が変更されると自動的に更新されます。これらは読み取り専用です。

計算信号の定義:

computed() 関数を使用します:

<code class="language-typescript">import { signal, computed } from '@angular/core';

export class PriceCalculator {
  price = signal(100);
  quantity = signal(2);
  totalPrice = computed(() => this.price() * this.quantity());
}</code>

ログイン後にコピー

price または quantity を更新すると、totalPrice が自動的に再計算されます。

効果: 副作用の管理

エフェクトは、信号が変化すると副作用 (ロギング、API 呼び出し、DOM 操作) を実行します。

エフェクトの作成:

effect() 関数を使用します:

<code class="language-typescript">import { signal, effect } from '@angular/core';

export class EffectExample {
  counter = signal(0);

  constructor() {
    effect(() => console.log('Counter:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }
}</code>

ログイン後にコピー

効果の使用例:

コンソールのログ
HTTP リクエスト
外部 DOM 操作

完全な例: カウンターアプリ

このカウンターアプリは、書き込み可能な計算された信号とエフェクトを示します。

<code class="language-typescript">import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Counter: {{ counter() }}</p>
      <p>Double: {{ doubleCounter() }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>
  `
})
export class CounterComponent {
  counter = signal(0);
  doubleCounter = computed(() => this.counter() * 2);

  constructor() {
    effect(() => console.log('Counter changed:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}</code>

ログイン後にコピー

シグナルのベストプラクティス: