Angular - przesyłanie danych do i z komponentu za pomocą dekoratorów Input, Output i klasy EventEmmiter

Stronę tą wyświetlono już: 24 razy

Wstęp

Nadeszla wiekopomna chwila - jak mawiał Pawlak na pogrzebie swego brata. A więc nadeszla wiekopomna chwila, by znaleźć jakiś sprytny, żeby nie powiedzieć przebiegły sposób na komunikowanie się nadrzędnego komponentu z własnoręcznie utworzonym komponentem. Jak jednak tego niezwykłego czynu dokonać?! Pytam się jak? Z odsieczą biegną ku nam dwa rozwiązania, jednakże na tej stronie będę omawiał tylko jedno z nich, które jest słuszne ze względu na charakter komunikacji element rodziec → element dziecko. Tak więc do wysyłania informacji do wnętrza komponentu wykorzystuje się Angular-owy dekorator o jakże wymownej nazwie Input.

Z kolei wysyłanie danych na zewnątrz to nieco bardziej złożona sprawa, tutaj z odsieczą biegnie nie tylko dekorator o równie wymownej nazwie Output ale i również specjalna klasa EventEmiter.

Podróż do wnętrza komponentu, czyli wysyłanie danych do komponentu

Wiele elementów HTML ma atrybuty, do których można w łatwy sposób się podpiąć, żeby tylko był jakiś przebiegły sposób na utworzenie takiego własnego atrybutu! Okazuje się to jednak prostsze aniżeli odebranie dzieciakowi lizaka (nie żebym kiedykolwiek próbował). Albowiem za prawdę powiadam wam, że wystarczy jedynie utworzyć w kodzie klasy komponentu jedno pole i udekorować je w następujący sposób:

Listing 1
  1. @Input()
  2. title: string = 'base title';

Zaś w kodzie HTML tegoż komponentu wystarczy umieścić następujący kod:

Listing 2
  1. <h1>{{ title }}</h1>

Wtedy to w kodzie HTML innego komponentu można zagnieździć wcześniej utworzony komponent przekazując do jego wnętrza dane np. tak:

Listing 3
  1. <app-my-component [title]='My title'></app-my-component>

Sam dekorator Input umożliwia ustawienie nazwy właściwości, po której będzie można wysyłać dane do wnętrza komponentu:

Listing 4
  1. @Input('myTitle')
  2. title: string = 'base title';

Teraz w kodzie komponentu nadrzędnego:

Listing 5
  1. <app-my-component [myTitle]="'My title'"></app-my-component>

Wyciąganie danych z komponentu

W przypadku wyciągania danych z komponentu sprawa nieco się komplikuje. Dzieje się tak ponieważ to komponent będzie decydował kiedy wyemitować informację z daną wartością. Najczęściej taka sytuacja powinna mieć miejsce, gdy wartość, która jest emitowana na zewnątrz się zmieniła. Nie ma jednak możliwości tutaj pobrania z komponentu wartości zmiennej w dowolnej chwili. Z tego też względu przechwycona wartość powinna być przechwytywana i przetrzymywana w zmiennej komponentu nadrzędnego.

W kodzie klasy komponentu dziecka należy napisać taki oto kod:

Listing 6
  1. title: string = '';
  2. @Input('myTitle')
  3. set setTitle(title: string) {
  4. this.title = title;
  5. this.titleEmiter.emit(title);
  6. }
  7. @Output()
  8. onTitleChanged: EventEmiter = new EventEmiter();

Teraz w kodzie HTML komponentu, w którym kontrolka została osadzona można podpiąć się pod zdarzenie i właściwość w następujący sposób:

Listing 7
  1. <app-my-component [myTitle]="tile" (onTitleChanged)="onTitleChanged($event)"></app-my-component>

Oczywiście w klasie też trzeba zmienną title i metodę onTitleChanged zadeklarować:

Listing 8
  1. title: string = '';
  2. onTitleChanged(value) {
  3. console.log('Title changed: ', value);
  4. }

Żeby to zadziałało trzeba w ngOnInit ustawić zmienną title jakiś ciąg znaków:

Listing 9
  1. ngOnInit() {
  2. this.title = 'Tytuł pod komponentu';
  3. }

Co powinno wywołać wyświetlenie następującego console log-a:

Title changed: Tytuł komponentu

Komentarze