Angular: Input i Output komponentu

Angular 10+

0:00Kiedy wiesz już jak wykorzystać wiązania danych wiązania eventów wewnątrz jednego

0:05komponentu no to możemy teraz przejść o krok dalej w tej lekcji i pokażę ci co

0:11możemy zrobić z samymi komponenty jak możemy.

0:13Samą koncepcję komponentu wykorzystać żeby szybciej łatwiej budować bardziej złożone

0:19aplikacje bardziej złożone interfejsu użytkownika.

0:21Tutaj mam na razie nasz jeden

0:23komponent i on jest zamontowany tutaj absurd iż mam tylko jeden komponent bo to

0:28komponent taki jakby za chwilę nam nie daje.

0:31Siła komponentów tkwią w możliwości ich wielokrotnego wykorzystania czyli np.

0:37takim jaką mogą utworzyć sobie kilka razy i jak wiesz każde wystąpienie w HTML u

0:42tego tutaj taka walka spowoduje wyświetlenie osobnego komponentu tutaj.

0:48I co jest ważne każdy z nich jest osobnym obiektem.

0:50Każdy z nich posiada własne dane jeśli tu

0:53wpisze bo tak pisze jak i tu pisze jeszcze coś innego np.

1:01Alize to jak widzisz każdy z komponentów działa zupełnie niezależnie od siebie.

1:04Każdy ma swoje własne dane każdy ma własne

1:06zdarzenia i one zupełnie są odizolowane od siebie nie mają wspólnych elementów.

1:12Co jest ciekawego. Te komponenty jak widzisz mogły

1:14wielokrotnie usłyszeć aż kolekcjonerskie wyglądają działają tak samo.

1:18Moc komponentów i ich możliwości tkwią w ich parametr rysowania mianowicie możemy

1:25komunikować to komponenty możemy przekazać mu pewne dane

1:29i możemy na słuch na zdarzeniach które występują w środku.

1:33Ponieważ poprzednich lekcji jeśli utworzył

1:35powiedzmy jakiś import z wieku element tekstowe import to pamiętasz że ja mogłem

1:40jakieś dane przekazać do środka jako parametr np.

1:43walił.

1:45Jeśli w danych mamy powiedzmy taki sam

1:48obiekt jak tu mieliśmy czyli tutaj jest też użytkownik nazwę go testowy

1:53to mogę przekazać go tak jak pamiętasz znajduje się w jej środku w tym płocie.

1:59Możemy przecież to w drugą stronę czyli na jakieś wydarzenie klapki Down

2:05na każdy klawisz możemy wyciągnąć to zdarzenie które powstaje w środku i np.

2:10sprawdzić jaka jest wartość tego buta po

2:13tym zdarzeniu tak jak to zdarzenie wystąpić co tam jest wpisane.

2:16No i z powrotem mogę odłożyć np.

2:18to do naszego obiektu to daje.

2:20Po co wyciągamy te dane ze środka z tego komputera.

2:24Dzięki temu ja mogę teraz w dowolnym miejscu w całym tym HTML u np.

2:28wyświetlić sobie tą wartość gdzieś indziej.

2:30Nie muszę ręcznie zdawać każdego elementu ze sobą tylko dane.

2:34Tutaj pojawia się wszędzie na stronie OK to już wiemy.

2:38Pytanie teraz jak możemy to wykorzystać

2:40przy komponenty tak samo jak każdy element HTML jak import Button itd.

2:46Niech one przyjmują jakieś dane i emitują eventy tak samo nasz element może de facto

2:50udawać element HTML też przyjmować dane i też emitować własne zdarzenia.

2:55To jest nasz element więc możemy sami sobie wymyślić co to ma być.

2:59Czyli tutaj ja mogę też zrobić walił np.

3:03przykład ale mogę wymyślić coś zupełnie własne pole.

3:05Na przykład mogę napisać że data czyli dane i mogę przekazać dowolne dane.

3:11To może być String ale może być np.

3:13cały obiekt user czyli użytkownika naszego i user ten obiekt chciałbym włożyć do

3:19środka przekazu jako parametr ten nie uda się wyświetlał mi w środku tym

3:23komponent walka gaz jak to działa tutaj na mnie krzyczy Ken big data.

3:29I ten błąd jakby zapamiętane bo ten błąd

3:32bo dzieci mówił że po prostu komponent nie przyjmuje.

3:36Nie akceptuję takiego parametru jak data

3:39musimy w komponenty zadeklarować taki parametr też mamy na to dwa sposoby.

3:43Mogę tutaj dopisać sobie impuls

3:48i impuls do którym w ten sposób że zmienna do której chcemy dane przypisać.

3:54Czyli chcemy tutaj przypisać żeby jak

3:55wiesz w HTML się to w składni wyświetlał komponent komponent HTML.

4:01I teraz te dane chce odebrać z parametrów data jak tylko wpisze to już błąd znika.

4:09Czyli dowolny obiekt przekazany tutaj tak naprawdę będzie przekazany w to miejsce.

4:15Czyli zamiast Herthą powinniśmy mieć teraz test zobaczymy.

4:21I super jest nasz komponent.

4:24Tu jest test.

4:25Tu jest test.

4:26Co ciekawe jak coś zmieniamy

4:29to zobacz że te wartości są przekazywane w głąb tego komponentu na dole.

4:36Jeśli tutaj coś zmienimy to zobacz jest to ten sam obiekt

4:40aczkolwiek uważaj bo jak widzisz zmiana tutaj nie z powodu ważnego zdarzenia.

4:45Mieliśmy dane ale komputer nie wiedział

4:47więc animację uruchomiła się dopiero kiedy faktycznie

4:51został przechwycony przez ten komponent czyli być może dane przekazywać do

4:55komponentu tylko musisz uważać po prostu czy ten komponent na pewno będzie o tym

4:59wiedział że dane się zmieniły i jest to jeden sposób

5:03drugim sposobem zamiast tutaj deklarować ten parametr to możemy użyć tego

5:08specjalnego kuratora import bezpośrednio przy zmiennej którą chcemy

5:14napisać parametrem tutaj import który trzeba importować w ogóle Smolar.

5:20I co możemy fajnego zrobić mogę tutaj jako parametr podać nazwę

5:24w ten sposób czy wiemy że do tej zmiennej podatnik gniazdo impuls o

5:29nazwie data wskaże który według komponentu może przekazać jakieś dane czyli np.

5:35możemy zrobić drugi komponent mogę stworzyć sobie drugiego użytkownika

5:40nazwę go powiedzmy anonim nie będzie miał imienia i anonim

5:47przekaże do drugiego komponentu komponent pierwszy będzie miał dane

5:54user komponent drugi będzie miał dane Anonim To jest test.

5:58Tutaj jest pusto.

6:00To się zgadza super.

6:02Dobrą praktyką jest nie mieszanie tutaj tego czyjeś faktycznie przekazuje obiekt.

6:06User no to dobrze nazwać jest to faktycznie user i fajna rzecz bo nie musi.

6:12User juz dwa razy tylko możesz to pominąć.

6:15Ja po prostu użyję nazwy zmiennej jako parametru.

6:18Jak widzisz możesz różnego rodzaju obiekty

6:20różne dane w pionie pod ten sam parametr i każdy z komponentów będzie miał swoją

6:24własną inną wartość niezależną i tę wartość też się zmieniały zależnie.

6:30Czyli ten anonim będzie się zmieniał razem

6:32z tym obiektem a ten user będzie się zmieniał razem z tym obiektem.

6:36I w naszym punkcie będzie od razu też widoczny ja czyli też rodzic nasz zespół

6:41dzieli te obiekty wtedy z dziećmi możemy rodziców zmieniać.

6:44Możemy zmieniać to w dziecku

6:48możemy też komunikację przeprowadzić w drugą stronę jak jakiś event pamiętasz to

6:53skażenie więc musimy wyciągnąć ten event to zdarzenie

6:57wyciągnąć jego szczegóły i zmodyfikować dane.

7:00Tutaj oponenci się zmienia tak samo jak my gdyby coś się stało

7:04wewnątrz tego komponentu walka zobaczmy powiedzmy ktoś

7:08na końcu zdecydował zasób trybu użytkownika

7:12to chcielibyśmy gdy ktoś klikanie za subskrypcję użytkownika.

7:16O tych nowych danych te nowe dane

7:17użytkownika zmienione przekazał z powrotem do góry do komponentu rodzica czy np.

7:23zapisać na serwerze i dane takiego użytkownika który się ze Słupska próbował.

7:27To teraz ja się tutaj chciałbym dodać zdarzenie jakieś event to też tak samo

7:31okrągłe nawias używa i wymyśla sobie jakąś własną nazwę zdarzenie czyli np.

7:38user sam skrypt.

7:43I tu mogę wykonać jakąś funkcję.

7:45Ja po prostu tutaj cylinder user i konsola.

7:52I zobaczymy co się stanie.

7:54Chciałbym tutaj dostać dane użytkownika

7:57lecz nie jest to żaden event tylko jest to obiekt który zbierał dane użytkownika.

8:02Teraz mogę tę funkcję sobie wykonać gdy to zdarzenie się zdarzy tak samo jak to

8:08robiliśmy tutaj i teraz te dane od rodzica który jesteśmy w środku w tym momencie.

8:14No to tak samo będą znajdowały się

8:16dolar event tym razem nie będzie to event przeglądarki

8:20takie jak klik czy kebab tylko będzie to obiekt który sami sobie definiujemy i np.

8:25może być to obiekt.

8:26Juz teraz mamy taki event wysłać ze środka

8:30z tej funkcji w komplecie komponent do rodzica.

8:35Tutaj do tej funkcji sub Script FAB komponent.

8:38żeby to zadziałało musimy zdefiniować tutaj coś takiego co nazywa się Emitel.

8:42Ja nazwę go tak samo Script.

8:47I będzie to nowy event Emitel.

8:50Uwaga importować go z angola record czyli jak go wydamy.

8:54Musimy się upewnić czy u góry jest

8:56importowany z angola KOR Core super jest tu obiekt który ma dwie ważne metody.

9:06Script pamiętaj o.

9:09Lis ma dwie ważne funkcje metody mit który pozwala wyemitować starzenie

9:16i SEB Script które pozwala nam obserwować zdarzenia.

9:20Tutaj mogę funkcję sobie podpiąć się w to teraz my tutaj nie chcemy

9:25skarbowa ć tego nie chcemy być w komplecie.

9:29Ten komponent rodzic lub komponent

9:31tym nawet sami okrągłymi de facto wspina się w subskrypcję i gdy ja emituje to.

9:40Tak naprawdę wykona się ta funkcja.

9:43Więc tutaj EBIT

9:45powiedzmy naszego użytkownika stąd przekażę do góry do rodzica.

9:52Zróbmy może w ten sposób że ja tu jeszcze

9:55Anonima tłum jeszcze Józefa i nasza funkcja subskrypcja konsol rok.

10:03Oprócz tego pod mini użytkowników czyli

10:05Designer to będzie nowy Józek czyli naszego anonimowego.

10:11Bierzemy stąd z dziecka.

10:15Przekazuje zobacz pusty obiekt przekazuje

10:17do środka do komponentu przy życiu płyta i przy użyciu autopilota.

10:25W ten sposób też czas importować u góry.

10:29Odsyłam spowrotem czyli tu dane przychodzą zamiast Chan są anonimowy.

10:37Tutaj.

10:39Wewnątrz komponentu możemy go edytować robić animacje.

10:42Te wszystkie kroki o których pamiętasz

10:43poprzednich lekcji i byliśmy gotowi to możemy tym autobusem.

10:48Gotowy już taki zmodyfikowany obiekt gotowy do zapisania oddać rodzicowi

10:54i teraz tak mogliśmy zrobić w nim komponentów.

10:57Tutaj jest właśnie możliwość używalności.

11:00Czy ja mogę zabrać coś obiektu edytować go

11:02w tym pojęcie wyciągnąć go z tego obiektu i wisieć przed innym kompanem

11:07poszedł pobrać obiekt z listy edytować i wyświetlić np.

11:11na wykresie OK.

11:12Zobaczymy jak to zadziała.

11:15Tworzę przeglądarkę.

11:19I mamy teraz tak tu jest anonimowy tu jest test.

11:24Jeśli tutaj coś pisze powiedzmy znowu nasz Bob.

11:30Czy chciałbyś tak.

11:32E-mailem test małpa układ test.

11:35Tak się stanie gdy się za cud spróbujemy.

11:39Te dane naszego Boba trafiły tutaj.

11:43Do drugiego komponentu

11:45czyli możemy sterować dokładnie komunikacją komponentów możemy wiedzieć

11:48kiedy przekazuje też obiekt do środka do tego komponentu w środku.

11:52Ten komponent obsługuje zmienia ten obiekt gdy skończył swoją pracę.

11:56Może przekazać wynik do jakiejś funkcji którą wszedłby na

12:00serwer albo przekaże do kolejnego komponentu i tak dalej i tak dalej.

12:04Czyli jak widzisz taki cały skomplikowany proces tak jak to mieliśmy że ileś kroków

12:10wykonywaliśmy po kolei w tym naszym komponenty.

12:13Krok pierwszy krok drugi trzeci czwarty itd.

12:16To wszystko de facto możemy podzielić na mniejsze kroki na mniejsze komponenty

12:21które musimy później wielokrotnie używać w różnych miejscach z różnymi parametrami z

12:25różnymi użytkownikami czyli taka komunikacja

12:28do środka do komponentu i na zewnątrz z komponentu pozwala na bardzo fajną rzecz

12:33pozwala właśnie wielokrotnie te same elementy wykorzystywać i budować takie

12:38bloki czy kroki z których budujemy jak z klocków Lego interfejs i dane.

12:44Wtedy tylko spędzamy z takimi elementami OK.

12:48Mam nadzieję że jest to jasne bo będziemy

12:50właśnie w ten sposób w kolejnych lekcjach budować dużo bardziej zaawansowane

12:54przykłady właśnie dzieląc skomplikowane duże elementy na mniejsze komponenty które

13:01będą się mogły w ten sposób właśnie komunikować.