Comprendre les signaux angulaires : un guide complet

Ce guide explore les signaux angulaires, un paradigme de programmation réactive moderne simplifiant la gestion des états. Nous examinerons leurs fonctionnalités de base, y compris les signaux inscriptibles et calculés, et démontrerons leur utilisation avec des effets. Des exemples pratiques consolideront votre compréhension.

Comprendre les signaux angulaires

Les signaux angulaires sont une primitive réactive conçue pour un état plus prévisible et gérable. Contrairement aux anciennes méthodes (Observables, EventEmitters), les signaux offrent une approche plus propre des variables réactives, mettant automatiquement à jour la vue sur les changements d'état.

Attributs clés du signal :

• Mises à jour synchrones : Les changements de signal sont immédiatement reflétés.
• Suivi des dépendances : Angular suit automatiquement les dépendances des signaux au sein des composants et des directives.
• Utilisation intuitive : Les signaux rationalisent la gestion de l'état par rapport aux observables.

Signaux inscriptibles : les bases

Les signaux inscriptibles sont l'élément fondamental, représentant l'état réactif mutable.

Création d'un signal inscriptible :

Utilisez la fonction signal() :

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);
  }
}

Méthodes de signal inscriptible :

1. set(newValue) : Attribue directement une nouvelle valeur. this.counter.set(10);
2. update(callback) : Mises à jour via une fonction de rappel. this.counter.update(val => val * 2);
3. mutate(callback) : mute directement des objets ou des tableaux. this.arraySignal.mutate(arr => arr.push(5));

Signaux calculés : valeurs dérivées

Les signaux calculés tirent leur valeur d'autres signaux, se mettant automatiquement à jour lorsque les dépendances changent. Ils sont en lecture seule.

Définir un signal calculé :

Utilisez la fonction computed() :

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

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

La mise à jour price ou quantity recalcule automatiquement totalPrice.

Effets : gérer les effets secondaires

Les effets exécutent des effets secondaires (journalisation, appels API, manipulation DOM) lorsque les signaux changent.

Créer un effet :

Utilisez la fonction effect() :

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);
  }
}

Cas d'utilisation des effets :

• Journalisation de la console
• Requêtes HTTP
• Manipulation externe du DOM

Exemple complet : une application de compteur

Cette application de compteur présente des signaux et des effets inscriptibles et calculés :

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);
  }
}

Meilleures pratiques en matière de signal :

1. Minimiser les effets : gardez les effets secondaires concis.
2. Utiliser des signaux calculés : pour l'état dérivé, préférez computed().
3. Évitez la sur-mutation : privilégiez update() plutôt que mutate().
4. Combiner avec l'injection de dépendances : intégrez des signaux à des services pour l'évolutivité.

Conclusion

Les signaux angulaires offrent une approche moderne et efficace de la gestion des états réactifs. Leur simplicité et leurs capacités améliorent l'expérience des développeurs et les performances des applications, conduisant à un code angulaire plus maintenable et plus prévisible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!