Dynamische Kopfleisten und / oder Inhalte für Ihre Ivy Angular App

(Nasreddine Skandrani) (24. Juni 2020)

Möglicherweise benötigen Sie unterschiedliche Kopfzeilen und / oder Inhalte, z. B. für verschiedene Benutzertypen. Lassen Sie uns überprüfen, wie es geht.

Hinweis:
Wenn Sie nicht mit Angular Ivy (Winkel 8 und darunter) arbeiten. Sie können einen Blick auf
meinen Beitrag in dieser Github-Ausgabe werfen, wo ich eine gute Link-Demo hinzugefügt habe Hilfe beim manuellen verzögerten Laden eines Moduls in alten Winkelversionen.
Wenn Sie Ivy aktiviert haben, lesen Sie einfach den Artikel weiter, in dem eine Lösung vorgestellt wird.

Szenario 1: Dynamische Kopfleisten mit gleicher Inhalt

Lösung 1

Überprüfen Sie die Online-Demo für diese Lösung 1.

In dieser Lösung 1 verwenden wir eine benannte router-outlet, um die header bar zu behandeln. Leider hat das verzögerte Laden mit loadChildren und dem Namen router-outlet derzeit einen Fehler in Angular.

Fehler bei Github -> https://github.com/angular/angular/issues/12842

Diese Demo endet mit dem folgenden Fehler im Protokoll:

Diese Lösung 1 mit „loadChildren“ funktioniert derzeit nicht, kann aber eines Tages funktionieren.

Lösung 2

Überprüfen Sie die Online-Demo auf diese Lösung 2.

In dieser Lösung 2 verwenden wir diesen Artikel . Also routen wir zu einem HeaderbarSelectorComponent und laden dann faul das richtige Modul mit einer Standardbedingung aus dieser Komponente heraus.

In der Demo2 können Sie die 2 umschalten Kopfleisten mithilfe der Schaltfläche toggle user type im Hauptteil der Seite und anschließendem erneuten Laden der Seite.

div Diese Lösung funktioniert einwandfrei, wie Sie in der Demo sehen können. ❤️

Szenario 2: Dynamische Kopfleisten mit dynamischem Inhalt

Wenden Sie dieselbe Strategie an als Szenario1 / Lösung2 für das Laden dynamischer Inhalte.

Sie fanden diesen Beitrag hilfreich! Geben Sie ihm etwas 👏👏👏 .
Vielen Dank

referenziert: 18093 12088 12842

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.