Angular: jak udostępniać dane komponentów

Wprowadzenie

Jedną z kluczowych cech Angular jest możliwość łatwego udostępniania danych między komponentami. Udostępnianie danych między komponentami ma kluczowe znaczenie dla tworzenia złożonych aplikacji, ponieważ umożliwia komponentom komunikację i wymianę informacji. W tym artykule omówimy różne metody udostępniania danych między komponentami Angular.

Wejście-wyjście

Angular zapewnia prosty sposób udostępniania danych między komponentami nadrzędnymi i podrzędnymi za pomocą właściwości wejściowych i wyjściowych. Komponent nadrzędny może przekazywać dane do komponentu podrzędnego za pośrednictwem właściwości wejściowych, podczas gdy komponent podrzędny może emitować zdarzenia za pośrednictwem właściwości wyjściowych w celu komunikacji z komponentem nadrzędnym.

Rozważmy prosty przykład, w którym mamy komponent nadrzędny i komponent podrzędny. Komponent nadrzędny posiada zmienną o nazwie parentData, którą chcemy przekazać do komponentu podrzędnego.

// parent.component.html
<app-child [childData]="parentData" (dataChanged)="handleDataChanged($event)"></app-child>

// parent.component.ts
export class ParentComponent {
  parentData: string = "Hello from parent";

  handleDataChanged(data: string) {
    console.log(data);
  }
}

// child.component.ts
export class ChildComponent {
  @Input() childData: string;
  @Output() dataChanged: EventEmitter<string> = new EventEmitter<string>();

  handleChange() {
    this.dataChanged.emit("Data changed in child");
  }
}

W tym przykładzie komponent nadrzędny przekazuje wartość parentData do komponentu podrzędnego za pomocą właściwości wejściowej childData. Komponent podrzędny emituje zdarzenie za pośrednictwem właściwości wyjściowej dataChanged, gdy dane zostaną zmienione. Komponent nadrzędny nasłuchuje tego zdarzenia i obsługuje je w metodzie handleDataChanged.

Udostępnianie danych przez Subject z Service

Innym sposobem udostępniania danych między komponentami jest użycie usługi współdzielonej. Usługa współdzielona może eksponować subject lub observable, którego komponenty mogą subskrybować i otrzymywać aktualizacje danych.

Rozważmy przykład, w którym mamy usługę współdzieloną o nazwie DataService. Usługa ma obiekt o nazwie dataSubject, który komponenty mogą subskrybować w celu otrzymywania aktualizacji danych.

// data.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class DataService {
  private dataSubject: Subject<string> = new Subject<string>();

  setData(data: string) {
    this.dataSubject.next(data);
  }

  getData() {
    return this.dataSubject.asObservable();
  }
}

// component1.component.ts
export class Component1 {
  constructor(private dataService: DataService) {}

  sendDataToService() {
    this.dataService.setData("Data from Component1");
  }
}

// component2.component.ts
export class Component2 {
  data: string;

  constructor(private dataService: DataService) {
    this.dataService.getData().subscribe((data) => {
      this.data = data;
    });
  }
}

W tym przykładzie Component1 wysyła dane do usługi DataService poprzez wywołanie metody setData. Component2 subskrybuje aktualizacje danych poprzez wywołanie metody getData i odbiera zaktualizowane dane w wywołaniu zwrotnym subskrypcji.

Udostępnianie danych przez NgRx Store

NgRx to biblioteka zarządzania stanem dla aplikacji Angular. Zapewnia scentralizowany magazyn, w którym komponenty mogą odczytywać i zapisywać dane. Udostępnianie danych między komponentami staje się łatwiejsze dzięki NgRx, ponieważ następuje jednokierunkowy przepływ danych..

Rozważmy przykład, w którym mamy sklep zarządzający stanem danych.

// app.state.ts
import { createAction, createReducer, on, props } from '@ngrx/store';

export const setData = createAction('[Data] Set Data', props<{ data: string }>());

export interface AppState {
  data: string;
}

export const initialState: AppState = {
  data: '',
};

export const dataReducer = createReducer(
  initialState,
  on(setData, (state, { data }) => ({ ...state, data }))
);

// app.module.ts
import { StoreModule } from '@ngrx/store';
import { dataReducer } from './app.state';

@NgModule({
  imports: [
    StoreModule.forRoot({ data: dataReducer })
  ],
})
export class AppModule { }

// component1.component.ts
export class Component1 {
  constructor(private store: Store<{ data: string }>) {}

  sendDataToStore() {
    this.store.dispatch(setData({ data: "Data from Component1" }));
  }
}

// component2.component.ts
export class Component2 {
  data: Observable<string>;

  constructor(private store: Store<{ data: string }>) {
    this.data = this.store.select('data');
  }
}

W tym przykładzie Component1 wysyła akcję setData z żądanymi danymi do store przy użyciu metody store.dispatch. Component2 wybiera właściwość data ze sklepu za pomocą metody store.select i subskrybuje ją za pomocą potoku asynchronicznego.

Inne możliwości udostępniania danych

Oprócz metod wymienionych powyżej, Angular oferuje kilka innych możliwości udostępniania danych między komponentami. Niektóre z nich obejmują:

Route parameters: Komponenty mogą udostępniać dane za pośrednictwem parametrów trasy, konfigurując router do przekazywania danych między komponentami za pomocą parametrów trasy. Local storage: Komponenty mogą przechowywać i pobierać dane z lokalnej pamięci przeglądarki. Session storage: Komponenty mogą przechowywać i pobierać dane z pamięci sesji przeglądarki. Pliki cookie: Komponenty mogą odczytywać i zapisywać dane w plikach cookie w celu udostępniania danych.

Wnioski

W tym artykule zbadaliśmy różne metody udostępniania danych między komponentami Angular. Zaczęliśmy od podstawowego mechanizmu wejścia i wyjścia, który pozwala komponentom nadrzędnym i podrzędnym na wymianę danych. Następnie przeszliśmy do bardziej zaawansowanych technik, takich jak udostępnianie danych za pośrednictwem usług i korzystanie z magazynu NgRx do zarządzania stanem. Ponadto krótko wspomnieliśmy o innych możliwościach udostępniania danych, w tym o parametrach trasy, lokalnym przechowywaniu, przechowywaniu sesji i plikach cookie. Wykorzystując te techniki udostępniania danych, można tworzyć bardziej niezawodne i interaktywne aplikacje Angular, które skutecznie wymieniają dane między komponentami.

Bibliografia

• https://angular.io/guide/inputs-outputs https://levelup.gitconnected.com/using-services-to-share-data-and-functionality-across-components-in-angular-de3f85d2ea36 

• https://mryenagandula.medium.com/angular-ngrx-example-sharing-data-between-two-different-components-using-ngrx-learn-it-in-26-ecc6004b3d42