Angular: Projekcja treści do komponentu

Angular 10+

0:00Jak pamiętasz komponenty pozwalają nam wielokrotnie ten sam widok czy fragment

0:04HTML wstawić w różne miejsca innych komponentów czyli np.

0:08ten nasz bar.

0:12Jeśli go umieszcza trzy razy w naszym

0:14płynnym Home komponent to się tu pojawia jak gdzieś na dole trzy razy.

0:19Bar Works jeszcze taki cały nagłówek powiedzmy ten Manchester.

0:26Też nie był Machine mógł wielokrotnie go wykorzystać i za każdym razem jakiś inny

0:31tekst umieścić tą sekcję umieszcza w środku w naszym rywalkom po necie.

0:36Mogę teraz wielokrotnie taki sam nagłówek

0:39użyć kilka razy jak już mamy raz 2 3 0 0 0 3 razy ten sam element

0:46czyli kupuje sobie jakiś HTML którą przygotowany i zobaczysz teraz trzy razy

0:51tytuł akurat inny jej autor agencji trzy razy i mógłbym np.

0:57ten HDR dojść tylko do jednego.

0:58Spróbujmy tak klas

1:01HDR tak tak się dokładnie nazywa Machine HDR to się zgadza

1:07i możliwe to tylko na jednym elemencie czyli jeden z nich powinien być większy.

1:14Manchester swojego znajdziemy Tap Roba

1:20i pierwszą klasę Ever który pomimo wysokości wyświetlić tylko uważaj

1:24bo komponenty jeszcze nasze które my tworzymy.

1:27No właśnie żeby one były na pewno typu Box czy dam sobie Display.

1:33Blog i to się teraz zgadza

1:37i ten HTML w środku powinien teraz być jeszcze pewnie wysokość 100 proc.

1:40. Ok.

1:41Jak widzisz pierwszy temat jest wyższy ma inny styl ma wygląd

1:45mu klasy parametry zmieniać go żeby tu się właściwie zachowywał.

1:49Problem jest w tym że o nim możemy wygląd zmienić tych elementów.

1:53No to każdy z nich zawiera ten sam HTML tę samą treść.

1:57Te same zachowania itd.

1:59Więc pytanie co możemy zrobić żeby mógł ten sam element użyć wielokrotnie zmienić

2:03jego rozmiar i wygląd ale tam już mógł przekazać mu różną treść do środka

2:08jak wiersz możemy parametry tego komponentu ale możemy także wstrzymać do

2:11komponentu content czyli dowolny inny HTML.

2:16Czyli powiedzmy tą część tutaj agencji to jeszcze w tym miejscu.

2:25I w miejscu które chcesz by się wyświetlał ten kontent.

2:28Ta cała treść tutaj dopisze po prostu.

2:33Engine content

2:37engine content służy do wyświetlania projekcji czyli do

2:42użycia HTML a my go szykujemy do środka tutaj tytuł komponentu.

2:46Ten tak otwierający tak zamykający tłum jeszcze pojawi się w tym bloku content.

2:51To napiszę powiedzmy jeszcze coś tam.

2:56I tu jeszcze coś innego.

3:01Widzisz każdy tych bloków zawiera osobne elementy i teraz muszę

3:05jeszcze poprawić CSS czy jeśli robak może mieć własne CSS więc tutaj jeśli Robak CSS

3:12specjalny lektor host pozwala nam oscylować sam komponent Display.

3:20Blog tu jeszcze wysokość 100.

3:29Trasę którą przekazujemy wysokość ma wysokość taką jak mamy tutaj.

3:33Pozostałe mają jakąś minimalną wysokość jakiś minimalny tekst czyli np.

3:37montuje sobie powiedzmy jakiś inny tekst pomiędzy.

3:45Norm która wygeneruje mi troszkę HTML a mimo to w akapicie czy powiedzieli że p.

3:51Loren czyli akapit tekstu oddzielny akapit

3:56pierwszy drugi i drugi barman w zupełnie inny HTML z innymi stylami.

4:02Możemy też dodać sobie jakieś właśnie przyciski i eventy i tak dalej to też

4:05będzie nam działało i zobaczmy jak to się zachowa.

4:09Czyli mam ten sam komponent mógłby instalować na różne sposoby.

4:14Mogę różne HTML bądź do tego samego komponentu którym

4:19otacza opracowuje ten HTML na różne sposoby.

4:24Czyli teraz mamy coś takiego że mamy

4:26tutaj nagłówek ma jakiś tekst z jakimś jak kapitan

4:31ING tu jak widzisz mamy zupełnie inną treść mimo że mamy ten sam HDR z tym

4:36samym tytułem z tymi samymi stylami Style możemy też tutaj

4:40zmieniać koło które tam jeszcze troszeczkę odstępu czyli powiedzmy ten

4:45kontener ten wiersz może mieć Ding poziomy druk pionowy pomiędzy 4 mamy odstępy.

4:53Ok zaczyna to jakoś wyglądać.

4:55Czyli dla powtórki jeszcze.

4:57Jeśli chcesz żeby komponent ten sam komponent miał w środku rozstrzygnięty

5:01fragment treści to po prostu tu używamy NG content

5:06and Content wskazuje w którym miejscu w tak zwanym widoku czyli w tym HTML u

5:11wewnętrznym użytkownik widzi w tym widoku w którym jego miejscu umieścić

5:16content treść i HTML który przekazuje mu od rodzica to co jest jeszcze istotne.

5:22Jeśli powiedzmy tworzę jakąś informację powinnam zmienną na przykład jakiś klik.

5:27Czy tu odpowiedzią Trybunału że Click Open itd to te zmiany które tu tworzę będą

5:34tylko dostępne w tym komponent jeśli robak natomiast w tym kontekście jeśli tu

5:39stworzy powiedzmy czy stworzy jeszcze jakąś informację np.

5:45czytaj więcej i chciałbym żeby kliknięcie rozwijało czytaj więcej.

5:57Czy kliknięcie chcemy rozwinąć tę drugą część.

6:00I tutaj chciałbym żeby było hitem jeśli nie read more.

6:09I tak samo tutaj możemy schować tego linka.

6:13Jeśli jest read more to wszystkie te interakcje które tu dodamy

6:18Onetu działają w tym miejscu ale one nie są dostępne w tym miejscu.

6:22Tak czy kod który tutaj mamy do tego kontentu to wszystkie zmienne muszą zniżką

6:28po komplecie tutaj czyli to musi być to w tym miejscu.

6:35Jeśli tu myślimy znowu jakieś zmienne to one tu są dostępne.

6:40Ale ten content nie ma dostępu do zmiennych które są zdefiniowane.

6:44Czy mamy dwa osobne HTML E każdy może mieć

6:47swoje własne zmienne jak widzisz pliki komponent interakcję.

6:51Możemy 1 HTML jakby wsadzić w inny

6:53komponent ale wszystkie zmienne i tak dalej zostają w komponent który

6:58faktycznie ten kod zawiera nie w komponent który tylko wyświetla.

7:02Dlatego też to nazywamy treścią content.

7:05Natomiast nazwiemy widokiem to już ten komponent tylko prezentuje

7:09wyświetla HTML który nie należy do niego i prezentuje też dane content które też nie

7:15należą do niego tylko należą do innego komponentu.

7:18Czyli podsumowując

7:20content pozwala na bardzo fajne wykorzystanie wielokrotnie tych samych

7:24fragmentów HTML a żeby otoczyć wymieniają treść którą chcemy pokonać w jakiejś np.

7:30ramkę kontener okno dane czy inne tego typu rzeczy.