Angular - dekorator ViewChild i odwoływanie się do elementów html w kodzie klasy komponentu
Stronę tą wyświetlono już: 3602 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:
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:
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:
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.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz