Naarmate de vraag toeneemt, worden de functies van het project complexer. Op dit moment moet je het project modulariseren en componenten, instructies en pijplijnen verpakken in samenhangende functionele blokken, wat precies goed is om subroutes en luie lading van modules in Angular4 te verkennen.
In de vorige ontwikkeling is een eenvoudige routeringsfunctie geïmplementeerd in de rootmodule, die kan worden samengevat in de volgende drie stappen:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Voeg een navigatiebalk toe aan het shellcomponent, waarbij het routerLink-commando naar de bestemming van de route wijst, en routerLinkActive css-stijl toevoegt aan het geselecteerde label
3. Voeg een router-outlet-commando toe aan het sjabloon van het shellcomponent, en de weergave wordt daar weergegeven
Nu wil ik subroutes en luie laden van modules op deze basis implementeren.
RouterModule.forRoot() en RouterModule.forChild()
Het RouterModule-object biedt twee statische methoden: forRoot() en forChild() om de routeringsinformatie te configureren.
De RouterModule.forRoot()-methode wordt gebruikt om de hoofdrouteringsinformatie in de hoofdmodule te definiëren, en RouterModule.forChild() lijkt op de Router.forRoot()-methode, maar kan alleen worden toegepast in featuremodules.
Dat wil zeggen, forRoot() wordt gebruikt in de wortelmodule en forChild() wordt gebruikt in de submodule.
Zijn zoon Lu Ru
Stel dat er twee pagina's zijn onder onze /settings-instellingenpagina, /settings/profile en /settings/password, die respectievelijk de profielpagina en de wachtwoordwijzigingspagina vertegenwoordigen. instellen als een apart functieblok, dat kan worden ingekapseld in een featuremodule. Het heeft zijn eigen onafhankelijke routes, en de routes voor de profiel- en wachtwoordpagina's kunnen als subroutes worden ingesteld.
In de SettingsModule-module gebruiken we de forChild()-methode, omdat SettingsModule niet de hoofdmodule van onze applicatie is.
Een ander belangrijk verschil is dat we het hoofdpad van de SettingsModule-module op een leeg pad ('') zetten. Want als we het pad op /settings zetten, zal het overeenkomen met /settings/settings. Door een leeg pad te specificeren, komt het overeen met het pad /settings.
Lui laden: loadChildren
Configureer de routeringsinformatie van de settingmodule in de rootmodule AppModule:
De lazy loading LoadChildren-eigenschap wordt hier gebruikt. In plaats van de SettingsModule in de AppModule te importeren, vertelt de loadChildren-eigenschap de Angular-route om de SettingsModule-module te laden volgens het pad dat door de loadChildren-eigenschap is geconfigureerd. Dit is de specifieke toepassing van de luie laadfunctie van de module; wanneer de gebruiker toegang krijgt tot het /settings/**-pad, wordt de bijbehorende SettingsModule-module geladen, wat de grootte van de geladen bron vermindert wanneer de applicatie start.
De eigendomswaarde van loadChildren bestaat uit drie delen:
Relatieve paden naar importmodules zijn vereist
#分隔符
Exporteer de naam van de moduleklasse
CommonModule-module
Ik gaf aan dat ik de CommonModule-module in de featuremodule wilde introduceren, maar ik merkte niet dat ik het eerst in de featuremodule wilde introduceren, en daardoor werd de paginafout gemeld tijdens het routeren:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Kan niet binden aan 'ngClass' omdat het geen bekende eigenschap van 'div' is.
Kan niet binden aan 'ngForOf' omdat het geen bekende eigenschap van 'p' is.
Property binding ngForOf wordt niet gebruikt door een richtlijn op een embedded template. Zorg ervoor dat de eigendomsnaam correct is gespeld en dat alle richtlijnen staan vermeld in de "@NgModule.declarations".
Je kunt niet binden aan 'ngIf' omdat het geen bekende eigenschap van 'div' is.
......
Na lang controleren ontdekte ik dat het kwam doordat ik CommonModule niet in de featuremodule had geïntroduceerd, en nadat ik het had geïntroduceerd, verdwenen deze fouten.
CommonModule biedt veel veelgebruikte instructies in applicaties, waaronder NgIf en NgFor. Preciezer gezegd worden directives zoals NgIf in de CommonModule gedeclareerd vanuit @angular/common.
We hebben de BrowserModule-module geïmporteerd in de rootmodule AppModule, die de CommonModule importeerde en opnieuw exporteerde. Het eindresultaat is dat zolang je de BrowserModule importeert, je automatisch de instructies in de CommonModule ontvangt.
Het importeren van een BrowserModule maakt alle componenten, richtlijnen en pijplijnen die door de module worden blootgesteld direct beschikbaar in elk componentsjabloon onder de AppModule zonder extra omslachtig stappen. Maar importeer de BrowserModule niet in een andere module. Featuremodules en lazy loading modules zouden in plaats daarvan in CommonModule geïmporteerd moeten worden. Ze vereisen geen herinitialisatie van de volledige applicatie-niveau provider. Als je een BrowserModule importeert in een luie laadmodule, geeft Angular een foutmelding.
Dit zijn enkele van de problemen en samenvattingen die ik de afgelopen twee dagen ben tegengekomen met Angular-subroutes en lui laden.
|
Geplaatst op 13-06-2019 13:13:10
|
|
|
|
