An dieser Stelle haben Sie vielleicht schon von dynamischen Komponenten gehört, die sehr nützlich sind, um dynamischere Anwendungen zu erstellen. Sie ermöglichen es uns, Komponenten abhängig von einer benutzerdefinierten Logik dynamisch zur Laufzeit zu laden, ohne eine Komponente erstellen zu müssen, die mit vielen ngIfs aufgebläht ist.

Wenn Sie noch nichts von Dynamic Components gehört haben, empfehle ich Ihnen, sich diesen Vortrag von Shmuela Jacobs bei Angular Connect anzusehen:

In meiner täglichen Arbeit baue ich ein System auf, das wie ein CRM ist, das verschiedene Produkte verwaltet, die alle einen gemeinsamen Kernteil haben, aber auch einige produktspezifische Dinge. Um Komponenten besser wiederverwendbar zu machen, habe ich hier und da dynamische Komponenten eingeführt, die abhängig von einem InjectionToken, der das aktuell aktive Produkt angibt, die richtige produktspezifische Komponente laden. Alles war schön und gut, bis ich versuchte, einen Step-Flow zu refaktorieren, der einige gemeinsame Schritte, aber auch einige produktspezifische Schritte hat. Dies war ein Problem, da der Step-Flow nicht nur komponentenbasiert, sondern auch von Routen abhängig ist. Das bedeutet, dass der Step-Flow eines Produkts einige zusätzliche Schritte, dh Routen, haben kann, die sich von den anderen unterscheiden. Auch die Anzahl der Schritte kann variieren.

Ein schmutziger Workaround wäre, eine feste Anzahl von Routen mit den Namen: step1, step2, step3 zu erstellen und dann die Komponente in jedem Schritt dynamisch zu laden, aber da die Anzahl der Schritte variiert, ist dies nicht möglich. Die richtige Lösung ist die Verwendung von Dynamic Routing .

Normalerweise definieren wir die Routen eines Moduls sehr statisch in einem Routing-Modul wie folgt:

Sobald das Modul geladen ist, gibt es keine Logik, die die statische Zuweisung der Routen stören kann, also gibt es immer die Home-Route und sonst nichts.

Beispiel

Schauen wir uns ein sehr vereinfachtes Beispiel an, das vielleicht nicht so viel Sinn macht, aber demonstrieren soll, wie dynamisches Routing funktioniert:

Wir wollen eine Anwendung mit folgenden Routen erstellen:

• Startseite (statisch)
• 404 Nicht gefunden (statisch)
• Tag (dynamisch; nur zwischen 6:00 und 18:00 Uhr verfügbar)
• Nacht (dynamisch; nur zwischen 18:00 und 06:00 Uhr verfügbar)
• Geheimnis (dynamisch; 50/50-Chance)

Nachdem wir nun unsere Routen im Anbieterbereich definiert haben, können wir das useFactory- Anbieterdefinitionsobjekt verwenden. So kommen wir an einer Fabrik vorbei, die die Logik enthält, die entscheidet, wie die Routen aussehen sollen.

Kurze Erinnerung: Wenn Sie das Modul um 5:59 Uhr geladen haben und bis 6:01 Uhr warten, ist die Tagesroute nicht verfügbar, da die Routenkonfiguration bereits zuvor durchgeführt wurde. Das bedeutet, dass die Logik, die die Routen definiert, nur einmal passiert, wenn das Modul geladen wird.

Fazit

Ich hoffe, ich konnte Ihnen etwas Neues und Interessantes zeigen. Wenn Sie an Angular interessiert sind, sehen Sie sich meine anderen Blog-Beiträge zu Medium an.

Das vollständige Beispiel ist auf meinem GitHub verfügbar: