Sygnały w Angularze 16 - część 2

W części 1 artykułu przedstawiliśmy podstawowe informacje o sygnałach w Angularze 16. W tej części omówimy bardziej szczegółowo działanie sygnałów i ich zastosowanie w praktyce.

Działanie sygnałów

Sygnały działają na zasadzie obserwowalności (observable). Każdy sygnał ma swoją własną kolejkę zdarzeń, do której dodawane są emitowane wartości. Komponenty, które są subskrybowane na sygnale, są automatycznie informowane o nowych wartościach w kolejce zdarzeń.

Wartości emitowane przez sygnały mogą być dowolnego typu danych. Mogą to być liczby, tekst, obiekty, listy, czy mapy.

Subskrypcja na sygnały

Aby subskrybować się na sygnał, należy użyć metody subscribe(). Metoda subscribe() przyjmuje funkcję jako parametr. Funkcja ta jest wykonywana po zmianie wartości sygnału.

Metoda subscribe() może przyjmować również inne parametry, takie jak:

• next(): parametr ten jest używany do przekazywania wartości sygnału do funkcji.
• error(): parametr ten jest używany do przekazywania błędów do funkcji.
• complete(): parametr ten jest używany do informowania o zakończeniu subskrypcji.

Kiedy stosować sygnały

Sygnały mogą być używane w różnych sytuacjach w aplikacjach Angularowych. Oto kilka przykładów zastosowania sygnałów:

• Komunikacja pomiędzy komponentami
  sygnały mogą być używane do przekazywania danych pomiędzy komponentami.
• Wydawanie zdarzeń
  sygnały mogą być używane do emitowania zdarzeń, które mogą być obsługiwane przez inne komponenty lub usługi.
• Podtrzymanie stanu aplikacji
  sygnały mogą być używane do podtrzymywania stanu aplikacji.

Kiedy nie stosować sygnałów

Sygnały to potężne narzędzie, ale nie powinno się ich używać w każdym przypadku. Oto kilka sytuacji, w których nie należy stosować sygnałów:

• Do przekazywania danych, które nie są zmienne: jeśli dane nie są zmienne, to nie ma potrzeby ich przekazywania za pomocą sygnałów. W takim przypadku można po prostu użyć właściwości komponentu.
• Do przekazywania danych, które są używane tylko w jednym komponencie: jeśli dane są używane tylko w jednym komponencie, to nie ma potrzeby ich przekazywania za pomocą sygnałów. W takim przypadku można po prostu użyć właściwości komponentu lub innej metody dostępu do danych.
• Do przekazywania danych, które są używane tylko w jednym cyklu detekcji zmian: jeśli dane są używane tylko w jednym cyklu detekcji zmian, to nie ma potrzeby ich przekazywania za pomocą sygnałów. W takim przypadku można po prostu użyć właściwości komponentu lub innej metody dostępu do danych.

Kilka dodatkowych wskazówek, które pomogą Ci zdecydować, czy użyć sygnału

• Jeśli nie jesteś pewien, czy użyć sygnału, to lepiej go nie używać.
• Jeśli musisz przekazać dane pomiędzy komponentami, to sygnał jest dobrym wyborem.
• Jeśli musisz emitować zdarzenia, to sygnał jest dobrym wyborem.
• Jeśli musisz podtrzymywać stan aplikacji, to sygnał jest dobrym wyborem.

Przykład zastosowania sygnału do podtrzymywania stanu aplikacji i inkrementacji

// Komponent emitujący sygnał
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

  @Output() mySignal = new EventEmitter();

  constructor() {
    this.myState = 10;
  }

  onIncrement() {
    this.myState++;
    this.mySignal.emit(this.myState);
  }

}

// Komponent subskrybujący się na sygnał
@Component({
  selector: 'my-subscriber',
  templateUrl: './my-subscriber.component.html',
  styleUrls: ['./my-subscriber.component.css']
})
export class MySubscriber {

  constructor(private readonly myComponent: MyComponent) {
    this.myComponent.mySignal.subscribe((value) => {
      console.log(value);
    });
  }

}

// HTML

<div class="my-component">
  <button (click)="myComponent.onIncrement()">+</button>
</div>

W tym przykładzie sygnał jest używany do podtrzymywania stanu liczbowego komponentu MyComponent. Kiedy użytkownik kliknie przycisk +, wartość stanu komponentu zostanie zwiększona o 1. Sygnał mySignal zostanie również wyemitowany, aby poinformować inne komponenty o zmianie stanu.

Podsumowanie

Sygnały to potężne narzędzie, które może znacząco ulepszyć wydajność i responsywność aplikacji Angularowych. Jeśli jeszcze nie korzystasz z sygnałów, warto się z nimi zapoznać.