Mit steigender Nachfrage werden die Aufgaben des Projekts komplexer. Zu diesem Zeitpunkt musst du das Projekt modularisieren und Komponenten, Anweisungen und Pipelines in kohärente Funktionsblöcke packen, was genau richtig ist, um Subrouten und das lazy Laden von Modulen in Angular4 zu erkunden.
In der vorherigen Entwicklung wurde eine einfache Routing-Funktion im Root-Modul implementiert, die in den folgenden drei Schritten zusammengefasst werden kann:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Fügen Sie der Shell-Komponente eine Navigationsleiste hinzu, wobei der routerLink-Befehl auf das Ziel der Route verweist und routerLinkActive dem ausgewählten Label css-Style hinzufügt
3. Fügen Sie der Vorlage der Shell-Komponente einen Router-Outlet-Befehl hinzu, und dort wird die Ansicht angezeigt
Jetzt möchte ich Zwischenrouten und faules Laden von Modulen auf dieser Grundlage implementieren.
RouterModule.forRoot() und RouterModule.forChild()
Das RouterModule-Objekt bietet zwei statische Methoden: forRoot() und forChild(), um die Routing-Informationen zu konfigurieren.
Die Methode RouterModule.forRoot() wird verwendet, um die Hauptroutinginformationen im Hauptmodul zu definieren, und RouterModule.forChild() ähnelt der Methode Router.forRoot(), kann aber nur in Feature-Modulen angewendet werden.
Das heißt, forRoot() wird im Wurzelmodul verwendet und forChild() im Untermodul.
Sein Sohn Lu Ru
Angenommen, es gibt zwei Seiten unter unserer /settings-Einstellungsseite, /settings/profile und /settings/password, die jeweils die Profilseite und die Passwortänderungsseite darstellen. als separaten Funktionsblock eingerichtet, der in ein Feature-Modul gekapselt werden kann. Es hat eigene unabhängige Routen, und die Routen für Profil- und Passwortseiten können als Unterrouten eingestellt werden.
Im SettingsModule-Modul verwenden wir die forChild()-Methode, da SettingsModule nicht das Hauptmodul unserer Anwendung ist.
Ein weiterer wesentlicher Unterschied ist, dass wir den Hauptpfad des SettingsModule-Moduls auf einen leeren Pfad ('') setzen. Denn wenn wir den Pfad auf /settings setzen, stimmt er mit /settings/settings überein. Durch die Angabe eines leeren Pfads entspricht er dem /settings-Pfad.
Lazy Loading: loadChildren
Konfigurieren Sie die Routing-Informationen des Einstellungsmoduls im Root-Modul AppModule:
Hier wird die Lazy Loading LoadChildren-Eigenschaft verwendet. Anstatt das SettingsModule in das AppModule zu importieren, weist die loadChildren-Eigenschaft der Angular-Route an, das SettingsModule-Modul gemäß dem von der loadChildren-Eigenschaft konfigurierten Pfad zu laden. Dies ist die spezifische Anwendung der Lazy-Loading-Funktion des Moduls; wenn der Benutzer auf den /settings/**-Pfad zugreift, wird das entsprechende SettingsModule-Modul geladen, was die Größe der geladenen Ressource beim Start der Anwendung verringert.
Der Eigentumswert von loadChildren besteht aus drei Teilen:
Relative Wege zum Importmodul sind erforderlich
#分隔符
Exportiere den Namen der Modulklasse
CommonModule-Modul
Ich erwähnte, dass ich das CommonModule-Modul im Feature-Modul einführen möchte, aber ich habe zunächst nicht bemerkt, dass ich es im Feature-Modul einführen wollte, und deshalb wurde der Seitenfehler während des Routings gemeldet:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Ich kann mich nicht an 'ngClass' binden, da es keine bekannte Eigenschaft von 'Div' ist.
Man kann sich nicht an 'ngForOf' binden, da es keine bekannte Eigenschaft von 'p' ist.
Property Binding ngForOf wird von keiner Direktive auf einer eingebetteten Vorlage verwendet. Stellen Sie sicher, dass der Immobilienname korrekt geschrieben ist und alle Anweisungen in den "@NgModule.declarations" aufgeführt sind.
Man kann sich nicht an 'ngIf' binden, da es keine bekannte Eigenschaft von 'div' ist.
......
Nach langer Überprüfung stellte ich fest, dass es daran lag, dass ich CommonModule nicht im Feature-Modul eingeführt hatte, und nachdem ich es eingeführt hatte, verschwanden diese Fehler.
CommonModule bietet viele häufig verwendete Anweisungen in Anwendungen, darunter NgIf und NgFor. Genauer gesagt werden Direktiven wie NgIf im CommonModule aus @angular/common deklariert.
Wir importierten das BrowserModule-Modul im Root-Modul AppModule, das wiederum das CommonModule importierte und erneut exportierte. Das Endergebnis ist, dass man, solange man das BrowserModule importiert, automatisch die Anweisungen im CommonModule erhält.
Das Importieren eines BrowserModule macht alle vom Modul bereitgestellten Komponenten, Direktiven und Pipelines direkt in jeder Komponentenvorlage unter dem AppModule verfügbar, ohne zusätzliche mühsame Schritte. Aber importiere das BrowserModule nicht in ein anderes Modul. Feature-Module und Lazy-Loading-Module sollten stattdessen in CommonModule importiert werden. Sie erfordern keine Neuinitialisierung des vollständigen Anwendungsanbieters. Wenn du ein BrowserModule in ein lazy loading module importierst, wirft Angular einen Fehler aus.
Dies sind einige der Probleme und Zusammenfassungen, auf die ich in den letzten zwei Tagen mit Angular-Subrouten und lazy loading gestoßen bin.
|
Veröffentlicht am 13.06.2019 13:13:10
|
|
|
|
