Interakcja między komponentami

W tej lekcji nauczą się Państwo, jak komponenty komunikują się w Angularze, zwłaszcza komponenty nadrzędne i podrzędne.

Interakcja nadrzędny–podrzędny

Komponenty często muszą współdzielić dane. Komponenty nadrzędne mogą przekazywać dane komponentom podrzędnym za pomocą właściwości wejściowych.

Używanie @Input()

Dekorator @Input() umożliwia odbieranie danych z komponentu nadrzędnego:

@Input() userData: string;

Przekazywanie danych do komponentu podrzędnego

W szablonie komponentu nadrzędnego należy przekazać dane za pomocą wiązania właściwości:

<app-child [userData]="parentData"></app-child>

Komunikacja komponentu podrzędnego z nadrzędnym

Komponenty podrzędne komunikują się z komponentem nadrzędnym za pomocą zdarzeń i dekoratora @Output().

Używanie @Output()

Należy utworzyć emiter zdarzeń, aby przesyłać dane z komponentu podrzędnego do nadrzędnego:

@Output() dataEvent = new EventEmitter<string>();

Emitowanie zdarzeń

Zdarzenia należy emitować z komponentu podrzędnego:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Nasłuchiwanie zdarzeń w komponencie nadrzędnym

Emitowane zdarzenia należy obsługiwać w szablonie komponentu nadrzędnego:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Podsumowanie

Rozumieją już Państwo, jak komponenty mogą komunikować się w Angularze za pomocą danych wejściowych i wyjściowych. Warto dalej ćwiczyć!