Siema! Dzisiaj zmieniamy tematykę. W cyklu #app pokazałem Ci, w jaki sposób tworzyć prostą aplikację za pomocą angulara. Jednak ten framework potrafi o wiele więcej!  Czas wejść na wyższy level. Dzisiaj znowu pogadamy o komunikacji komponentów. Tym razem poznasz dekorator @ViewChild() i jego zastosowanie

@ViewChild()

To dekorator propercji, podobnie jak @Input(). Z jednak tą różnicą, że służy do zapisania w zmiennej referencji do dziecka danego komponentu. Dzieckiem może być dowolny element HTML zdefiniowany w tym komponencie, lub cały komponent.

Po co to stosować?

Dodatkowy sposób komunikacji komponentów. @Input() daje możliwość przekazania zdefiniowanych i ściśle określonych danych z parenta do childa. @Output() odwrotnie. Wykorzystując @ViewChild() masz możliwość odwoływania się do publicznych pól i metod childa w parencie. Możesz odwołać się do czego tylko zapragniesz. Tym razem to nie komponent decyduje co chce udostępnić na zewnątrz. To parent decyduje do czego chce się dobrać.

Drugie zastosowanie to dobranie się do wartości konkretnych tagów HTML. W klasie .ts możesz wyedytować dowolny element, jeżeli tego potrzebujesz. Nadanie dodatkowej klasy, czy zawartości z poziomu klasy komponentu. Cała logika w pliku .ts, a szablon tylko wyświetla dane.

Jak to zrobić?

Bardzo prosto. Wystarczy nam jedynie zdefiniowanie propercji w klasie parenta:

Dla komponentów:

@ViewChild(ChildComponent) child: ChildComponent;

Dla tagów HTML:

<div #ref></div>

@ViewChild('ref') child: ElementRef;

Jak pewnie już widzisz, chcąc obserwować konkretny komponent deklarujesz typ zmiennej zgodny z klasą tego komponentu. Dzięki temu masz dostęp do publicznych pól i metod tej klasy. Odtąd, w dowolnym momencie możesz używać this.child jak zwykłego pola klasy parenta.

W przypadku tagów HTML musisz oznaczyć ten tag poprzez dowolny string z przedrostkiem ‚#’. Potem tu używasz tego stringa jako identyfikator, na podstawie którego angular namierzy tag i przypisze do zmiennej. Inny jest też deklarowany typ – ElementRef, czyli referencja lokalna na konkretny element HTML. Logiczne c’nie?

Propercja child klasy parenta na początku jest undefined. Możesz odwoływać się do niej, dopiero po zainicjalizowaniu widoku i wystąpieniu zdarzenia ngAfterViewInit(). Więcej o lifecycle hooks w kolejnym wpisie.

@ViewChildren()

Co w przypadku kiedy nasz ParentComponent składa się z klilku ChildComponent’ów tego samego typu? Co jeżeli potrzebujesz dostępu do referencji każdego z nich? Angular już spieszy Ci z pomocą! Wystarczy, że zadeklarujesz listę komponentów w klasie rodzica:

@ViewChildren(ChildComponent) children: QueryList<ChildComponent>

W ten sposób w zmiennej this.children przechowujesz kolekcję QueryList składającą się z wszystkich ChildComponent’ów stworzonych w ParentComponent.

Tyle na dziś dzięki!