Dynamické pruhy záhlaví a / nebo obsah vaší Ivy Angular App

(Nasreddine Skandrani) (24. června 2020)

Možná budete muset mít různé pruhy záhlaví a / nebo obsah, například pro různé typy uživatelů. Podívejme se, jak na to.

Poznámka:
Pokud nejste s Angular Ivy (angular 8 a níže). Můžete se podívat na
můj příspěvek v tomto vydání github , kde jsem přidal ukázku dobrého odkazu na pomůže vám ručně líně načíst modul ve starých úhlových verzích.
Pokud máte povolenou Ivy, pokračujte ve čtení článku, kde je představeno řešení.

Scénář 1: dynamické pruhy záhlaví s stejný obsah

Řešení 1

Zkontrolujte online ukázku tohoto řešení 1.

V tomto řešení 1 používáme ke zpracování header bar pojmenovaný router-outlet. Líné načítání s loadChildren a pojmenovaným router-outlet bohužel právě teď má chybu v Angular.

Problém s chybou Github -> https://github.com/angular/angular/issues/12842

Toto demo končí touto chybou v protokolu:

Takže prozatím toto řešení 1 s programem `loadChildren` nefunguje, ale jednoho dne může.

Řešení 2

Zkontrolujte online demo toto řešení 2.

V tomto řešení 2 používáme tento článek . Směřujeme tedy k HeaderbarSelectorComponent a pak z vnitřní strany této komponenty líně načteme pravý modul se standardním podmíněným.

V demo2 můžete přepnout lišty záhlaví pomocí tlačítka toggle user type v těle stránky a poté stránku znovu načíst.

❤️ Toto řešení funguje perfektně, jak vidíte v ukázce. ❤️

Scénář 2: dynamické pruhy záhlaví s dynamickým obsahem

Použít stejnou strategii jako scénář1 / řešení2 pro načtení dynamického obsahu.

Tento příspěvek je pro vás užitečný! dej mu něco 👏👏👏 .
Děkuji

odkazováno: 18093 12088 12842

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *