bare de antet și / sau conținut dinamic pentru Ivy Angular Aplicație

(Nasreddine Skandrani) (24 iunie 2020)

Este posibil să fie necesar să aveți diferite bare de antet și / sau conținut, de exemplu pentru diferite tipuri de utilizatori. Să verificăm cum să o faceți.

Notă:
Dacă nu sunteți cu Angular Ivy (unghiular 8 și mai jos). Puteți să aruncați o privire la
postarea mea în acest număr github unde am adăugat un demo de link bun vă ajută să încărcați manual un modul în versiunile unghiulare vechi.
Dacă aveți activat Ivy, continuați să citiți articolul, este prezentată o soluție.

Scenariul 1: bare dinamice de antet cu același conținut

Soluția 1

Verificați demo-ul online pentru această soluție 1.

În această soluție 1, folosim un numit router-outlet pentru a gestiona header bar. Din păcate, încărcarea leneșă cu loadChildren și denumită router-outlet are o eroare în Angular chiar acum.

Problema Bug Github -> https://github.com/angular/angular/issues/12842

Această demonstrație ajunge la această eroare în jurnal:

Deci, deocamdată, această soluție 1 cu `loadChildren` nu funcționează, dar poate într-o zi.

Soluția 2

Verificați demo-ul online pentru această soluție 2.

În această soluție 2, folosim acest articol . Deci, direcționăm către un HeaderbarSelectorComponent și apoi încărcăm leneș modulul potrivit cu un condițional standard din interiorul acestei componente.

În demo2, puteți comuta 2 bare de antet utilizând butonul toggle user type din corpul paginii, apoi reîncărcând pagina.

❤️ Această soluție funcționează perfect, după cum puteți vedea în demonstrație. ❤️

Scenariul 2: bare de antet dinamice cu conținut dinamic

Aplicați aceeași strategie ca scenariu1 / soluție2 pentru încărcarea dinamică a conținutului.

Ai găsit această postare de ajutor! dă-i ceva 👏👏👏 .
Mulțumesc

la care se face referire: 18093 12088 12842

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *