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

Angular 16 wprowadził szereg nowości, z których jedną z najbardziej znaczących jest wprowadzenie sygnałów. Sygnały to nowy sposób przekazywania danych pomiędzy komponentami, który jest bardziej reaktywny i wydajny niż tradycyjne metody.

Zalety sygnałów

Sygnały oferują szereg korzyści w porównaniu do tradycyjnych metod przekazywania danych:

• Są bardziej reaktywne: sygnały automatycznie wykrywają zmiany i propagują je do komponentów, które są na nich subskrybowane. Dzięki temu dane są zawsze aktualne, bez konieczności stosowania jawnych subskrypcji.

W tradycyjnych metodach przekazywania danych, takich jak przekazywanie właściwości lub metod, należy jawnie subskrybować się na zmianę wartości. Oznacza to, że komponent musi wykonać dodatkową operację, aby sprawdzić, czy wartość się zmieniła. Sygnały eliminują tę potrzebę, automatycznie informując komponenty o zmianach.

• Są bardziej wydajne: sygnały nie wymagają tworzenia obiektów obserwowalnych, co może znacząco poprawić wydajność aplikacji.

Obiekty obserwowalne są używane do przekazywania danych pomiędzy komponentami w tradycyjnych metodach. Są one obiektami, które monitorują zmiany wartości i informują o nich subskrybentów. Sygnały nie wymagają tworzenia obiektów obserwowalnych, ponieważ mogą same monitorować zmiany wartości.

• Są bardziej elastyczne: sygnały mogą być używane do przekazywania dowolnego typu danych, w tym obiektów, list i map.

Obiekty obserwowalne są ograniczone do przekazywania danych typu obiektu. Sygnały nie mają tej ograniczenia i mogą być używane do przekazywania dowolnego typu danych.

Jak używać sygnałów

Użycie sygnałów jest bardzo proste. Aby utworzyć sygnał, należy użyć adnotacji @Output():

@Output() mySignal = new EventEmitter();

Adnotacja @Output() tworzy obiekt EventEmitter, który jest używany do emitowania wartości sygnału.

Aby subskrybować się na sygnał, należy użyć metody subscribe():

component.mySignal.subscribe((value) => {
  // Wykonaj akcję po zmianie wartości sygnału.
});

Metoda subscribe() przyjmuje funkcję jako parametr, która jest wykonywana po zmianie wartości sygnału.

Przykład zastosowania sygnałów

Poniżej znajduje się przykład zastosowania sygnałów:

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

export class MySignalComponent {

  @Output() mySignal = new EventEmitter();

  constructor() {
    this.mySignal.emit(10);
  }

}

// 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 mySignalComponent: MySignalComponent) {
    this.mySignalComponent.mySignal.subscribe((value) => {
      console.log(value);
    });
  }

}

Wynik działania tego kodu:

10

W tym przykładzie komponent MyComponent emituje wartość 10 za pomocą sygnału mySignal. Komponent MySubscriber subskrybuje się na sygnale mySignal i wyświetla wartość w konsoli po jej zmianie.

Kontynuacja w części 2

W części 2 artykułu omówimy bardziej szczegółowo działanie sygnałów i ich zastosowanie w praktyce.