@Input() @Output() – przekazywanie danych

Dzisiaj parę słów o przekazywaniu danych poprzez dekoratory @Input() oraz Output().

Angular to świetny framework dzięki któremu możemy tworzyć szybkie  i niezawodne aplikacje internetowe, dzięki wielu technikom dzielenia kodu. Dla mnie cechy Angulara jako frameworka są po prostu niesamowite. Każdy fragment tworzonego kodu ma specjalny cel i wymaga minimalnej liczby powtórzeń.

Wspominając o nie powtarzalnym kodzie, możemy pójść odrobine dalej, a mianowicie do kolejnej wspaniałej funkcji jaką posiada Angular, tj. programowania modułowego przy użyciu komponentów..

Komponenty zapewniają nam świetny sposób na podział kodu, który jest w większości powtarzalny. Przykładami mogą być modale, notyfikacje , formularze, obsługa błędów itp. Istnieje niezliczona ilość zastosowań dzielenia logiki zawartej w komponentach.

Ok Świetnie! więc dzielimy nasze moduły na komponenty. Teraz nasza aplikacja posiada moduły, które są dalej podzielone na komponenty.

I to już? Ale zapytacie jak przekazujemy dane między tymi komponentami?

Bardzo prosto ! więc w zasadzie są trzy najważniejsze sposoby przesyłania danych między komponentami, których pozwala nam użyć framework:

• @ViewChild()
• @Input() and @Output() (Tylko jeżeli komponent ma relacje rodzic – dziecko)
• Servisy
  

W tym artykule skupimy się na drugim sposobie dzięki któremu można łatwo przekazywać dane z komponentów nadrzędnych do komponentów potomnych lub odwrotnie, używając dekoratorów @Input, @Output i EventEmitter.

Postaram się opisać je jeden po drugim

@Input()

@Input() służy do łączenia właściwości jednego komponentu (zwykle komponentu podrzędnego) z innym komponentem (zwykle komponentem nadrzędnym).

@Input() someData: any; 

@Output()

Natomiast @Output() służy do łączenia właściwości komponentu podrzędnego i emitowania go przez EventEmitter. Tak więc za każdym razem, gdy komponent potomny musi przekazać pewne dane do komponentu rodzica, może to zrobić, emitując je przez emiter zdarzeń.

@Output() exampleEmitter = new EventEmitter() 

Krótko mówiąc, @Input() służy do przekazywania danych od rodzica do komponentu podrzędnego, a @Output() służy do przekazywania danych od komponentu podrzędnego do komponentu (dziecka) nadrzędnego (rodzica).

Zobrazujmy to na przykładzie:

Komponent potomny (TS)

import { Component, Input, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: example,
   templateUrl: './ example.component.html',
 })
 export class ExampleComponent {
  @Input() someData: any;
  @Output() exampleEmitter = new EventEmitter();
  handleEmitData= (data) => {
     this. exampleEmitter.emit(data)
   }
 }

Komponent nadrzędny (HTML)

<div class="row">
 <div class="col-12">
   <example [someData]="data" (handleEmitData)="emitterInvokeFunction($event)">
 </div>
</div>     

W przykładzie someData jest używany do przekazywania danych z komponentu nadrzędnego do komponentu podrzędnego i jest przekazywany za pomocą wiązania właściwości przy użyciu nawiasów [].

handleEmitData służy do emitowania danych z komponentu podrzędnego do komponentu nadrzędnego i jest odbierany w komponencie nadrzędnym przy użyciu wiązania zdarzeń za pomocą nawiasów ().

Wiązania w komponencie nadrzędnym (rodzica)

Sposób zastosowania tych dwóch różnych wiązań dotyczy danych wejściowych i wyjściowych.

• Za pomocą [] wiązanie odwołujące się do przekazania danych do komponentu.
• Za pomocą () wiązanie odwołujące się do odebrania danych z  komponentu.

Nazywamy to jednokierunkowym wiązaniem danych, ponieważ dane przepływają tylko w jedną stronę, do lub z komponentu.

Wnioski

Podsumujmy, @Input() i @Output() służą do przekazywania danych między komponentami nadrzędnymi oraz podrzędnymi.

Więcej o pozostałych dwóch sposobach przekazywania danych postaram się napisać w przyszłych artykułach. Jeśli nadal jesteś zainteresowany przeczytaniem czegoś więcej, możesz zapoznać się z pozostałymi artykułami.

Jeśli podobało Ci się to, co czytasz, lub jeśli masz jakieś pytania zostaw komentarz i łapkę w górę 😊

👇👇👇 Jeżeli podobał Ci się ten artykuł zostaw po sobie ślad w komentarzach 👇👇👇