Dynamiczne paski nagłówka i / lub zawartość Twojego Ivy Angular Aplikacja

(Nasreddine Skandrani) (24 czerwca 2020 r.)

Może być konieczne zastosowanie różnych pasków nagłówka i / lub zawartości, na przykład dla różnych typów użytkowników. Zobaczmy, jak to zrobić.

Uwaga:
Jeśli nie masz Angular Ivy (ang. Angular 8 i poniżej). Możesz rzucić okiem na
mój post w tym wydaniu na githubie , w którym dodałem dobre demo linków do pomóc ci ręcznie leniwie ładować moduł w starych wersjach kątowych.
Jeśli masz włączoną opcję Ivy, po prostu kontynuuj czytanie artykułu, zostanie przedstawione rozwiązanie.

Scenariusz 1: dynamiczne paski nagłówka ta sama treść

Rozwiązanie 1

Sprawdź online demo dotyczące tego rozwiązania 1.

W tym rozwiązaniu 1 używamy nazwanego router-outlet do obsługi header bar. Niestety, leniwe ładowanie za pomocą loadChildren i nazwanego router-outlet ma teraz błąd w Angular.

Błąd na Githubie -> https://github.com/angular/angular/issues/12842

Ta demonstracja kończy się z tym błędem w dzienniku:

Więc na razie to rozwiązanie 1 z argumentem `loadChildren` nie działa, ale może któregoś dnia.

Rozwiązanie 2

Sprawdź online demo , aby znaleźć to rozwiązanie 2.

W tym rozwiązaniu 2 korzystamy z tego artykułu . Kierujemy się więc do HeaderbarSelectorComponent, a następnie leniwie ładujemy odpowiedni moduł ze standardowym warunkiem z wnętrza tego komponentu.

W demo2 możesz przełączyć 2 nagłówki za pomocą przycisku toggle user type w treści strony, a następnie ponowne załadowanie strony.

❤️ To rozwiązanie działa doskonale, jak widać na demonstracji. ❤️

Scenariusz 2: dynamiczne paski nagłówka z dynamiczną zawartością

Zastosuj tę samą strategię jako scenariusz1 / rozwiązanie2 dla dynamicznego ładowania treści.

Ten post okazał się pomocny! daj mu trochę 👏👏👏 .
Dziękuję

przywołane: 18093 12088 12842

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *