Angular: Dynamiczna zamiana szablonu

Angular 10+

0:00Na potrzeby kolejnej lekcji pozwoliłem

0:03sobie dodać do naszej strony dodatkowe sekcje z listą usług które oferujemy.

0:08Jednak jak widzisz ta lista jest dość

0:10długa tych sekcji jest dużo więc spróbujmy w tej lekcji przełączyć

0:14sobie tutaj klikając odpowiedni przyciski przełączyć się między tymi sekcja.

0:19Myślisz tylko jedną usługę naraz żeby nam

0:22się to w ten sposób nie rozjeżdżają na cały ekran.

0:26I teraz jak możemy to zrobić

0:28może tylko się do tego NG If I polecam Tobie zatrzymać się w tym

0:32miejscu dodać sobie tutaj różne zdarzenia typu klik stworzyć jakąś zmienną która

0:37będzie przekonywała aktualnie aktywną zakładkę i tutaj możesz do tych wszystkich

0:41elementów dodać odpowiednie GIF żeby ukrywać wszystkie niepotrzebne elementy.

0:48OK.

0:48Udało się to ja pokażę tobie może troszeczkę inny sposób tym razem

0:53także tworzę jakąś dodatkową zmienną czyli w naszym komponentu homo komponent.

0:58Ps. czy w naszej klasie która odpowiada za ten

1:00plik HTML stworzył tutaj zmienną powiedzmy Active Current.

1:07Ta aktualna zakładka ustawy na razie jako

1:10pusty String i tekst do każdego z tych naszych linków do powiedzmy zdarzenie klik

1:17i za każdym razem do tej naszej i tutaj ta pisze jakiś inny ciąg znaków który

1:25odpowiada po prostu za jakąś inną sekcję tutaj w naszej aplikacji.

1:32W ten sposób może marketing Mobile Web

1:34sektę łeb czyli klikając każdą z nich ta zmienna zmieni się na inną wartość.

1:39Ja mówię mógłbym do każdego z tych elementów mostu If i sprawdzić czy pieszy.

1:44Tak to jest marketing czy drugi to jest mobile.

1:47To jest jeden sposób

1:48ale możemy także te nasze dyrektywy wykorzystać z gwiazdką inne inne dyrektywy

1:53niż GIF czyli powiedzmy całą tą sekcję którą chce zmieniać

1:58da nam dyrektywę księgi swoich i przekaże naszą zmienną Kurdystanu

2:05i do każdego elementu który chce pokazywać i chować.

2:08Czyli powiedzmy tutaj każdy z tych dowodów.

2:14Będzie pierwszy drugi trzeci.

2:15Na każdym z nich dodam swój mecz KS.

2:22Warunek to dodam do każdego z teamów i do każdego z tych dwóch także

2:27piszę inną wartość tego naszego Krisa żeby tylko ten kasę odpowiada wartości

2:33tego słuchacza tylko wtedy chcemy żeby był aktywny.

2:35To jest pytanie dla ciebie tutaj przy których z tych dyrektyw chcemy wydać

2:39gwiazdkę a przy któryś z tych dyrektyw powinien podać np.

2:43ofertowe.

2:43Nawiasem pamiętasz że gwiazdka służy do pokazywania i chowania do twarzy

2:48niszczenia elementów bo tak naprawdę gwiazdka oznacza plagiat

2:51czyli nie ma sensu dodawania gwiazdki tutaj dlatego że nie chce ukrywać

2:55wszystkich sekcji chce ukryć tylko niektóre sekcje tutaj

2:59więc przy chęci swój czas tutaj właśnie przy nich muszę dodać gwiazdkę zamieniając

3:05całe te elementy w elementy typu end Temple.

3:09I teraz tutaj bo

3:10jeśli przekaże klienta w ten sposób to nie zadziała bo jest to tylko tekst gwaranta.

3:16Jeśli chcemy żeby to akurat traktował jako

3:18kod jako wyrażenie dynamiczne to musisz pamiętać zawsze o nawiasach kwadratowych.

3:24I teraz jak widzisz krętaczy zrobił niebieski.

3:26Widzę że jest to zmienna Current string.

3:29I teraz tutaj warunki wpisujemy.

3:31Czy marketing przekazać to widzisz.

3:34Gwiazdka także powoduje pilnowanie

3:36wartości i od teraz szuka zmiennej marketing.

3:39Nie ma takiej zmiennej.

3:40Ale jest taki ciąg znaków marketing

3:43który chce porównać z naszym TAP czyli do każdego z nich

3:48pisze powiedzmy którejś z tych wartości i nie zobaczymy jak to zadziała.

3:59Czyli jak widzisz tutaj mamy tylko pierwszą opcję.

4:01Jeśli ustawie wartość rent patrzę na którąkolwiek z tych zdefiniowanych.

4:06To zobaczymy tylko jedną z dostępnych sekcji.

4:10Super tylko pytanie teraz co z tą pierwszą częścią.

4:14Chciałbym żeby ona zniknęła

4:16jeśli zobaczę którąkolwiek z nich więc mógłbym też napisać specjalnego IFA

4:20który sprawdza czy nie jest to żadna z tych rzeczy.

4:24Mogę zapewnić że i faktur sprawdzę czy

4:25jest to pusty ciąg znaków ale słuchacz posiada jeszcze jedną bardzo

4:29fajną rzecz mianowicie ja mogę całą tutaj tą część.

4:36Cały ten element.

4:40Atakować jeszcze dodatkowego drzewa

4:44i oznaczyć go jako gwiazdka tak żeby znikał NG swoich dni fot.

4:51będzie on być aktywny jeśli nasza zmienna

4:55nie pasuje do żadnego innego hasła żadnej innej szablonu.

5:03Spróbujmy teraz jest to chyba w złym miejscu.

5:06Czytam i widzę niepotrzebnie otworzyłem chyba będzie to w ten sposób.

5:12Zobaczmy czy na początku mamy tutaj oferuje różne usługi kliknij opcję

5:18klikając opcję to opcja znika i teraz możemy już tylko

5:22się przełączać pomiędzy różnymi opcjami różnymi ofertami.

5:26Początkowy komunikat już znika nie jest on

5:29dostępny musielibyśmy wyczyścić zmienną czas.

5:33Czy jak widzisz dyrektywy strukturalne i

5:35szablony już nie tylko by kosztować w pojedynkę tak jak to robiliśmy przy naszym

5:41Anglii ale także możesz przeczytać TUTAJ DYREKTYWY swój i swój czyli kasę.

5:47One współpracują razem.

5:49Jak widzisz by dać nam tutaj bardzo fajną

5:50możliwość przełączania się pomiędzy różnymi wariantami tej samej zmiennej.

5:56Ok czyli mamy nasze.