Signalo naudojimo kampu 17 vadovas

Įvadas

Angular 17 yra galingas įrankis kuriant šiuolaikines žiniatinklio programas. Su kiekvienu nauju leidimu kūrėjų komanda prideda naujų funkcijų, o vienas įdomiausių „Angular 17“ papildymų yra „Signal“ palaikymas. Šiame straipsnyje išnagrinėsime, kas yra signalas, kaip jį naudoti „Angular“ ir pateiksime realių naudojimo pavyzdžių.

Kas yra Signalas?

Signalas yra sąvoka, naudojama duomenų pokyčiams sekti ir į juos reaguoti. Tai supaprastina būsenos valdymą ir leidžia automatiškai atnaujinti komponentus pasikeitus duomenims. „Angular“ kontekste „Signal“ integruojamas su reaktyviais ir asinchroniniais procesais, suteikdamas paprastesnį ir intuityvesnį būdą valdyti programos būseną.

Kodėl signalas yra svarbus?

• Reaktyvumas: Signalas leidžia automatiškai reaguoti į duomenų pasikeitimus, supaprastindamas programos būsenos ir vartotojo sąsajos sinchronizavimą.
• Spektaklis: naudojant signalą galima pagerinti našumą optimizuojant komponentų atvaizdavimą.
• Paprastumas: Signalas supaprastina kodą, todėl jis tampa lengviau skaitomas ir prižiūrimas.

Signalo kūrimas

Norėdami pradėti, sukurkime paprastą signalą, kuris stebės skaitiklio būseną. „Angular“ galime sukurti signalą naudodami signal nuo @angular/core biblioteka.

1 veiksmas: importuokite reikiamus modulius

Atidarykite failą ir importuokite reikiamus modulius, tada sukurkite skaitiklio signalą:

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

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center">
      <h1>Angular Signal Example</h1>
      <p>Count: {{ count() }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>
  `,
  styleUrls: ('./app.component.css')
})
export class AppComponent {
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }

  decrement() {
    this.count.set(this.count() - 1);
  }
}

Signalų metodai

• rinkinys: set metodas naudojamas naujai signalo vertei nustatyti. Aukščiau pateiktame pavyzdyje increment metodas padidina signalo vertę 1 naudojant this.count.set(this.count() + 1).

• atnaujinti: update Šis metodas leidžia atnaujinti signalo vertę pagal jo dabartinę vertę:

  this.count.update(value => value + 1);
  

• Prenumeruoti: subscribe metodas leidžia užsiprenumeruoti signalo pakeitimus:

  this.count.subscribe(value => {
    console.log('Count changed to', value);
  });
  

Prieiga prie signalo

Norėdami pasiekti signalo vertę, turite jį iškviesti kaip funkciją: count(). Tai būtina, nes „Signal“ grąžina funkciją, apvyniojančią dabartinę reikšmę, leidžiančią „Angular“ sekti pakeitimus ir automatiškai atnaujinti atitinkamus komponentus.

Reaktyvūs signalai

Vienas iš pagrindinių „Signal“ privalumų yra galimybė sukurti reaktyvius signalus, kurie automatiškai atnaujinami pasikeitus priklausomybėms. Panagrinėkime pavyzdį, kai turime du signalus, vaizduojančius taško koordinates, ir trečią signalą, apskaičiuojantį atstumą nuo pradžios.

1 veiksmas: sukurkite koordinačių signalus

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

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center">
      <h1>Reactive Signal Example</h1>
      <p>X: {{ x() }}, Y: {{ y() }}</p>
      <p>Distance from origin: {{ distance() }}</p>
      <button (click)="moveRight()">Move Right</button>
      <button (click)="moveUp()">Move Up</button>
    </div>
  `,
  styleUrls: ('./app.component.css')
})
export class AppComponent {
  x = signal(0);
  y = signal(0);

  distance = computed(() => Math.sqrt(this.x() ** 2 + this.y() ** 2));

  moveRight() {
    this.x.set(this.x() + 1);
  }

  moveUp() {
    this.y.set(this.y() + 1);
  }
}

Kas skaičiuojama?

computed yra funkcija, leidžianti kurti reaktyvius skaičiavimus pagal kitus signalus. Grąžinta vertė computed bus automatiškai atnaujintas, kai pasikeis kuris nors jame nurodytas signalas. Aukščiau pateiktame pavyzdyje distance yra apskaičiuojamas remiantis x ir y ir bus atnaujintas, kai pasikeis kuris nors iš šių signalų.

Asinchroninės operacijos su signalu

Signalas taip pat gali būti naudojamas valdyti būseną, kai atliekamos asinchroninės operacijos, pvz., gaunami duomenys iš API.

1 veiksmas: sukurkite signalą ir duomenų saugojimo bei įkėlimo būsenos metodus

data = signal(null);
loading = signal(false);
error = signal(null);

loadData() {
  this.loading.set(true);
  this.error.set(null);

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      this.data.set(data);
      this.loading.set(false);
    })
    .catch(error => {
      this.error.set(error);
      this.loading.set(false);
    });
}

2 veiksmas: atnaujinkite šabloną

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

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center">
      <h1>Async Signal Example</h1>
      <div *ngIf="loading()">Loading...</div>
      <div *ngIf="error()">Error: {{ error() }}</div>
      <div *ngIf="data()">
        <pre>{{ data() | json }}</pre>
      </div>
      <button (click)="loadData()">Load Data</button>
    </div>
  `,
  styleUrls: ('./app.component.css')
})
export class AppComponent {
  data = signal(null);
  loading = signal(false);
  error = signal(null);

  loadData() {
    this.loading.set(true);
    this.error.set(null);

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data.set(data);
        this.loading.set(false);
      })
      .catch(error => {
        this.error.set(error);
        this.loading.set(false);
      });
  }
}

Signalo ir RxJS palyginimas

RxJS buvo pagrindinis įrankis reaktyvumui valdyti „Angular“ iki „Signal“ įvedimo. Palyginkime juos:

Signalas

• Naudojimo paprastumas: Signalas suteikia paprastesnę ir intuityvesnę būsenos valdymo sintaksę.
• Spektaklis: Signalas optimizuotas atnaujinti tik tas DOM dalis, kurios iš tikrųjų pasikeitė.
• Integracija: Signalas geriau integruojamas su Angular pokyčių aptikimo mechanizmais.

RxJS

• Lankstumas: RxJS siūlo galingus operatorius sudėtingoms reaktyviosioms grandinėms.
• Platus palaikymas: RxJS naudojama daugelyje projektų ir turi didelę ekosistemą.
• Mokymosi kreivė: RxJS reikalauja gilesnio reaktyvaus programavimo supratimo, o tai gali būti sudėtinga pradedantiesiems.

Palyginimo pavyzdys

Signalas:

count = signal(0);

increment() {
  this.count.set(this.count() + 1);
}

RxJS:

import { BehaviorSubject } from 'rxjs';

count$ = new BehaviorSubject(0);

increment() {
  this.count$.next(this.count$.value + 1);
}

Signalo naudojimo pranašumai ir trūkumai

Privalumai

• Spektaklis: optimizuoja DOM naujinimus, stebėdamas pokyčius signalo lygiu.
• Paprastumas: Paprastesnė ir suprantamesnė sintaksė, palyginti su RxJS.
• Integracija su Angular: Geresnė integracija su Angular pokyčių aptikimo mechanizmais.

Trūkumai

• Ribotas lankstumas: Signalas yra mažiau lankstus, palyginti su RxJS, ypač sudėtingų reaktyvių scenarijų atveju.
• Mažesnė ekosistema: Signalas yra naujesnis ir turi mažesnę ekosistemą, palyginti su RxJS.
• Mokymosi kreivė: norint pereiti nuo RxJS prie signalo, reikia išmokti naujų koncepcijų ir požiūrių.

Išvada

„Signal in Angular 17“ yra galingas ir lengvai naudojamas mechanizmas, skirtas valdyti programų būseną ir reaktyvumą. Šiame straipsnyje išnagrinėjome pagrindines signalo sąvokas ir naudojimo pavyzdžius, įskaitant pagrindinius signalus, reaktyvius signalus ir asinchronines operacijas. Taip pat palyginome signalą su RxJS ir aptarėme jų privalumus ir trūkumus.

Pabandykite naudoti signalą kitame Angular projekte ir pajuskite šio galingo įrankio privalumus.