Angular - dekorator ViewChild i odwoływanie się do elementów html w kodzie klasy komponentu

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

Wstęp

Czas najwyższy nadszedł, aby poruszyć jakże to niezmiernie ważny wątek dotyczący możliwości odwoływania się do elementów kodu HTML bezpośrednio z poziomu kodu klasy komponentu. Do tego celu w jakże przebiegły (żeby nie powiedzieć perfidny) sposób wykorzystać można dekorator ViewChild. Albowiem okazuje się, że ów dekorator pozwala na szybkie podpięcie się pod element HTML jest jednak pewien haczyk. Otóż do obiektu tak udekorowanego można się odwoływać dopiero po wygenerowaniu widoku. To ograniczenie nie wydaje się być tak straszna ani wielkie dla tych, co wiedzą o istnieniu haka życia komponentu o nazwie ngAfterViewInit.

ViewChild - odwoływanie się do elementu w kodzie HTML

Coby nie przedłużać długo skądinąd wyczekiwanej chwili, oto jak można podpiąć się w Angular-ze 8 pod element kodu HTML:

Listing 1
  1. @ViewChild('data', { static: true }) data: ElementRef<HTMLElement>;
  2. ngAfterViewInit() {
  3. console.log('data', this.data);
  4. }

To nie wszystko, konieczne jest również utworzenie elementu i oznaczenie go, tak aby dekorator wiedział do jakiego elementu ma się podpiąć a robi się to w następujący sposób:

Listing 2
  1. <div #data>
  2. Some text data
  3. </div>

Teraz w konsoli przeglądarki powinno pojawić się:

data Object { nativeElement: div.example }

Teraz z poziomu kodu klasy komponentu można wpływać na wszelkiej maści właściwości elementu, pod który w jakże przebiegły sposób udało się podpiąć. Oto jakże zaawansowany sposób wykonywania takich karkołomnych manipulacji, którymi żaden mistrz Angular-a nie pogardzi:

Listing 3
  1. this.data.nativeElement.style.backgroundColor = 'yellow';

a wszystko to dzięki obiektowi ElementRef i poprawnemu zdefiniowaniu szablonowego typu przyjmowanej wartości, czyli w tym przypadku typu HTMLElement, dzięki czemu Visual Studio Code zaczyna zachowywać się przyzwoicie i podpowiada strudzonemu programiście nazwy pól, właściwości a nawet i metod obiektu tejże klasy, który zawarty jest w polu nativeElement.

Komentarze