Angular: Lokalne referencje i zdarzenia

Angular 10+

0:00Wiesz już jak możesz modyfikować dowolne własności atrybuty HTML a więc kolekcji

0:06zobaczymy jak możemy dodać tutaj różne zachowania możemy obsłużyć akcję o której

0:11zdarzenia użytkownika czyli przejdę do przeglądarki.

0:16Gdybyśmy chcieli powiedzmy tutaj na

0:18kliknięcie w ten element sobie znajdę ten akapit.

0:23Gdybym chciał to kapitał

0:25obsłużyć to zdarzenia obsługę kliknięcia to może być atrybut Anglik.

0:31I tu są dziś funkcje mają konsolę Long Click.

0:39W ten sposób

0:40jeśli przekażę to jakąś funkcję jakiś kod to kliknięcie teraz ten przycisk

0:45wykona nam tę funkcję i każde kliknięcie wyświetli plik.

0:48Tak to działa. Działa skrycie

0:50czy musiał znowu znaleźć element zmienić jego własność stworzyć funkcją przypisać.

0:54Zobaczmy jak to wygląda.

0:57Jeśli chcemy dodać na przykład do Buttona błoto część na nim.

1:04Jeśli chciałbym obsłużyć zdarzenie klik

1:07to robię to nie poprzez on tylko poprzez otwarty nawias.

1:12I tu wpisuje się już samo zdarzenie.

1:13Czy widzisz tutaj Blur Cancer klik.

1:18I tutaj po prawej stronie pisze już tylko ciało funkcji duszy całej funkcji pisać

1:23tylko od razu kot który chce wykonać czyli np.

1:26powiedzmy sobie nagle nazwa funkcji jest dowolna.

1:35Może tak zrobimy ustawę że Józef name imię

1:44zmienione i teraz tutaj mogę wykonać tę

1:47funkcję lub inną czyli funkcję ja piszę po tej stronie

1:52a tu już mogę ją tylko uruchomić pamiętaj o nawiasach żeby ją faktycznie wykonać czy

1:56nie zostawić samej funkcji tylko żeby ją uruchomić.

1:59Więc na razie.

2:00A skąd się pojawiło a swobodnej zachęcam.

2:05Jak i teraz się kliknąć.

2:10Zwróć uwagę że ten zmienił się w każdym miejscu w którym jest.

2:16Czy jeśli zmienimy dane tutaj

2:18to autor upewnij się że wszystkie miejsca w których występuje ten first name

2:22przestają zmienione czy zmienią się tutaj zmieniło się to Venus płyta czy zmienimy

2:27tekst zmienimy własność i jeszcze wszystkie inne miejsca.

2:30Jest to bardzo wygodna rzecz nie musimy teraz w piętnastu różnych miejscach szukać

2:35tych elementów tak jak modyfikować tylko jeśli elementy obserwują

2:39są spięte w jakieś dane w naszym kodzie to zmiana samych danych powoduje że Aguilera

2:45aktywnie aktualizuje wszystkie elementy HTML które wskazują na te dane.

2:51Ta nasza funkcja jednak zawsze zmienia tę samą wartość.

2:56I nie przyjmuje żadnych argumentów więc tu jest troszkę łatwiej rozbudować.

3:01Powiedzmy że chcielibyśmy wziąść aktualną

3:03wartość tego buta i by korzystać z tej funkcji tez mógłbym do tego dodać.

3:10Jasne jest tylko wtedy musiałbym później wyszukać po tym ile jest to o tyle

3:15niewygodne tyle niebezpieczne że nigdy nie wiem czy gdzieś na stronie inne komponenty

3:20ktoś też przypadkiem tak samo nie nazwał elementu ma dwa testy.

3:25Na stronie znajdują się dwa elementy import działa mają id est.

3:29Przy bliższym pokazuje uwaga znalazłem dwa elementy z nie unikalnym ID.

3:35Jeśli próbujesz go pobrać to zostaje tutaj tablicę i straszny bałagan się robi.

3:39Potem Chandler pozwala na fajną rzecz.

3:42Jeśli chcemy w HTML u odwołać się z jednego elementu do drugiego np.

3:46w pliku to zamiast idei ja mogę użyć takiego znaczka jak chcesz.

3:53I to definiuje taką lokalną referencje

3:55czyli zmienną która istnieje tylko w tym szablonu.

3:58I ona nie wycieka.

3:59Jeśli ktoś w innym komponentu nie nazwie

4:02tak samo element to nie będzie tutaj kolizji.

4:06Ja tak sądzę.

4:07I tutaj wprowadza jakąś nazwę.

4:09Czyli chociaż zaraz ide mówić to test to jest lokalna IDE.

4:14Może też bardziej sensownie.

4:15Będzie to first name referencje na

4:20przykład nazwę to jest dowolna jest to nazwa lokalnej zmiennej i za fajną

4:24rzecz mogę przekazać sobie jako parametr do tej

4:29funkcji i tutaj otrzymamy to jako parametr i konsol lock.

4:36I zobaczymy w konsoli co się stanie czy

4:38nie teraz wywołana tą funkcję czy jeszcze raz oznaczał ten import referencyjny.

4:45I w momencie kliknięcia

4:47wykonuje ten kod czyli przekazuje do funkcji Change name ten element.

4:53Zobaczymy co się stanie.

4:55Mamy przycisk mam import to wpisuje coś tam.

5:01Klika.

5:04I zobacz cały ten import.

5:07Jestem tutaj przekazany jako argument do funkcji.

5:12Jeśli mamy taki impuls to co możemy z nim zrobić.

5:15Mam import do zmiennej pisałem mogę sobie zobaczyć na nim jego.

5:24Czyli to będzie test.

5:27To jest test czy mogę w każdej chwili

5:28zebrać odczytać wartość ta jeśli mam do niego referencje to jest jeden sposób.

5:32Super czyli tutaj zamiast obstawiać to samo zawsze użyję sobie tutaj to.

5:39Jeśli chcesz by odpowiadał na te elementy tutaj w tym miejscu to możemy dość typ.

5:44Jest to HTML import elementu czoła skrypt mógł podpowiedzieć że będzie to h t ml.

5:50Import w ten sposób ustalimy typ to tu i teraz podpowie że kropka.

5:592.

5:59Możemy sobie to sprawdzić konsolowa mogę wyrzucić.

6:02Sprawdźmy teraz ten czyli z buta wyciągamy Walią i Walią.

6:09Jeśli zmienimy tego już zera.

6:10Tom Muller to walił jak już pamiętasz wszędzie w całym.

6:14Chodzi nam aktualizuje Hansen bo częściej i wszędzie się nam zmienił.

6:23Sam zaktualizować te wszystkie miejsca

6:26żeby odświeżyć ten HTML zawsze zgadzał się z tymi danymi.

6:30Zmieniamy dane.

6:31Anwar pilnuje żeby HTML się za sobą że był aktywny i działa to bardzo fajnie.

6:38Z tym że musisz pamiętać o jednej rzeczy musisz wiedzieć w którym momencie a Muller

6:42faktycznie aktualizuje HTML a żeby nie szukać niespójności wtedy brzmi to

6:47strasznie ale jest to bardzo prosta zasada.

6:49Powiedzmy że użyję tego sama żeby wyświetlić długość wpisanego tekstu

6:54czyli powiedzmy że użytkownik który akapit zrobię.

6:58Użytkownik może wpisać

7:01170 znaków powiedzmy na Twitterze i zobaczymy ile zostało czyli odjąć first

7:08name wywalił kropka linków na 175 czy chce wyświetlać

7:17z każdą z nich zmieniał literki chcą pokazywać ile zostało znaków.

7:20I teraz teoretycznie to powinno działać bo tutaj zobacz First Time Review.

7:29To jest farsa.

7:31My zmieniamy walutę i tuż płynem pojawi się długość a jak

7:35zobaczysz Englert tego nam nie będzie aktualizowany

7:39czyli wpisuje sobie polityce raz 2 3 4 5 6 5 nic się nie dzieje piknik jest

7:47na miejscu a jak widzisz nie obserwuję wszystkich impulsów na stronie sam z

7:52siebie i nie reaguje się przy każdej zmianie.

7:54A Bolek aktualizuje HTML tylko jeśli wykryje jakieś zdarzenie czyli wychwycić

8:00zdarzenie które które obserwuje jeśli jest to zdarzenie którego queer nie obserwuje.

8:06Nie powoduje to generowania ekranu jeśli zdarzenie pamiętasz zdarzenie Click

8:11to zdarzenie Click spowoduje aktualizacja ekranu

8:15zmianę wartości i przeliczenie nowej wartości tego wyrażenia czy też

8:20używanie tego RF a co tyle niebezpiecznie niewygodne że możesz zgubić aktualizację.

8:26Jak możemy naprawić.

8:27Jak upewnić się że z każdą literą będziemy mieć na pewno aktualną wartość.

8:33Mógłbym do tego im płytę dodać zdarzenie bezpośrednio czyli tutaj to zdarzenie np.

8:39część.

8:43I z każdą liderką od razu modyfikować np.

8:45nasze.

8:47Przypisać tutaj przecież tymczasową zmienną.

8:54I tu to zapisać.

8:57Czyli temp najmniej

8:58równa się i ciekawa rzecz bo jak mamy Change najważniejsze funkcje pisać.

9:06Ja mogę też dostać się do zdarzenia które tu wystąpiło.

9:10Czyli mogę zrobić np. tutaj.

9:12Specjalna zmienna Dollar

9:14event jest to zmienna która sama jest tylko tutaj przy budowaniu zdarzeń.

9:19Ja mogę z tego zdarzenia różne informacje

9:21wyciągnąć na przykład to klawisz albo target czyli element na którym

9:26wystąpiło zdarzenie import i mogę z niego wysiąść walił bezpośrednio w ten sposób.

9:34I tutaj CMS trwa.

9:36Mogę użyć tego albo Rafa nie ma znaczenia dla tegoż że faktycznie jeśli tu jest

9:41przyjęte zdarzenie to to zdarzenie będzie powodowało oderwanie ekranu.

9:48Zobaczmy Raz Dwa Trzy.

9:50Nic się nie dzieje dlaczego zdarzenie.

9:53Dopiero na zakończenie edycji dopiero za opuszcza pole dopiero się pojawia.

9:59Innego.

10:00Spróbujmy też na przykład AP czyli gdy ktoś opuści klawisz.

10:105.

10:13I teraz zobaczmy jak ładnie działa.

10:17Ale obserwujemy ten element.

10:19Jeśli mamy zmienną tymczasową to lepiej by

10:22było faktycznie tą długość też pobierać z tej zmiennej tymczasowej.

10:26Dlaczego tak.

10:27Dlatego że jeśli wiąże się dwie zmienne

10:29referencyjną to tylko jeden element się aktualizuje jeśli wartość elementu

10:34umieścił już tutaj w kodzie to później wszystkie miejsca gdzie w HTML

10:38to znajduje się za tolerują więc jest to lepsze podejście.

10:42Więc zawsze możesz odwołać się do tej wartości ale lepiej jest po prostu każde

10:46zdarzenie każdą zmianę wsadzić sobie gdzieś tu.

10:50I masz pewność że zawsze się to prze wędruje nie będzie nigdy starych wartości

10:55w tych wrażeniach czy pojętej po prostu żeby zawsze jeśli coś zmieniasz to by tam

10:59był event pod pięty no i najlepiej żeby te zmiany nowe dane

11:04żeby zawsze wróciły z powrotem do komponentu.

11:06Może być to dodatkowo osobna zmienna AP i każdą taką klik na to

11:12przekazują dalej albo możemy w ogóle uprościć sprawę

11:16pozbyć się tej zmiennej tymczasowej i po prostu z każdą literą wskażą klawisze

11:21bezpośrednio modyfikować nasz obiekt i user w wersji muzealnej w ten

11:26sposób przycisk Change natomiast nam zupełnie niepotrzebne

11:30czyli do wyświetlenia używamy tej zmiennej przy każdym klawiszem aktualizuje my z

11:35każdym klawiszem tą zmienną z każdym klawiszem Angers sprawdza co się zmieniło

11:39i aktualizuje Text HTML a wyrażenia i wartość.

11:44Zobaczmy.

11:46Kręcą jak i teraz wskażą klawisze. To działa.

11:50Uważaj tylko bo na przykład jeśli ktoś zrobi kontrolę.

11:55żeby to zadziałało na pewno.

11:56Jeśli ktoś robi prawym np.

12:00prawym wklej to możemy też zgubić niektóre

12:04niektóre zmiany więc lepszym zdarzeniami jest zdarzenie import.

12:08Jest to zdarzenie HTML owe nie jest to specjalny ambulans jest to normalnie

12:11zdarzenie kredytowe import o tyle fajne że ono reaguje na dowolne zmiany i w ten

12:16sposób masz gwarancję zobacz że każda zmiana każdy akt użytkownika

12:20na pewno za zły ekran jest masa kodu którego nie musimy pisać.

12:25Bank robi to za nas.

12:26Musimy powiadomić go o każdej zmianie.

12:29Nawet jak tu kliknąć w ten sposób i umieć jeszcze powiem nie.

12:33Małpę serduszko i nie wiem co tu jeszcze będzie kwiatka.

12:39On reaguje z tym bez problemu mogę nawet

12:42wyciąć tekst mogę wnieść jakiś tekst opuścić nieważne co zrobimy Anglia

12:47gwarantuję że wszystkie elementy na ekranie są.