Etter hvert som etterspørselen øker, blir prosjektets funksjoner mer komplekse. På dette tidspunktet må du modularisere prosjektet og pakke komponenter, instruksjoner og pipelines i sammenhengende funksjonsblokker, noe som er akkurat riktig for å utforske underruter og lat lasting av moduler i Angular4.
I forrige utvikling er en enkel rutingsfunksjon implementert i rotmodulen, som kan oppsummeres i følgende tre trinn:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Legg til en navigasjonslinje i shell-komponenten, der routerLink-kommandoen peker til destinasjonen for ruten, og routerLinkActive legger til css-stil til den valgte etiketten
3. Legg til en ruter-uttak-kommando i malen til shell-komponenten, og visningen vises der
Nå vil jeg implementere underruter og lat lasting av moduler på dette grunnlaget.
RouterModule.forRoot() og RouterModule.forChild()
Objektet RouterModule tilbyr to statiske metoder: forRoot() og forChild() for å konfigurere rutingsinformasjonen.
Metoden RouterModule.forRoot() brukes til å definere hovedrutingsinformasjonen i hovedmodulen, og RouterModule.forChild() ligner på Router.forRoot()-metoden, men kan kun brukes i funksjonsmoduler.
Det vil si at forRoot() brukes i rotmodulen og forChild() brukes i undermodulen.
Hans sønn Lu Ru
Anta at det er to sider under vår /settings-innstillingsside, /settings/profile og /settings/password, som representerer henholdsvis profilsiden og passordendringssiden. setting som en separat funksjonsblokk, som kan kapsles inn i en funksjonsmodul. Den har sine egne uavhengige ruter, og rutene for profil- og passordsidene kan settes som underruter.
I SettingsModule-modulen bruker vi forChild()-metoden, fordi SettingsModule ikke er hovedmodulen i applikasjonen vår.
En annen stor forskjell er at vi setter hovedstien til SettingsModule-modulen til en tom sti (''). For hvis vi setter stien til /settings, vil den matche /settings/settings. Ved å spesifisere en tom sti, matcher den /settings-stien.
Latlat lasting: lastBarn
Konfigurer rutingsinformasjonen til innstillingsmodulen i rotmodulen AppModule:
LoadChildren-egenskapen for lat lasting brukes her. I stedet for å importere SettingsModule til AppModule, forteller loadChildren-egenskapen Angular-ruten at den skal laste SettingsModule-modulen i henhold til stien som loadChildren-egenskapen konfigurerer. Dette er den spesifikke bruken av modulens lazy loading-funksjon; når brukeren får tilgang til /settings/**-stien, vil den tilsvarende SettingsModule-modulen bli lastet inn, noe som reduserer størrelsen på den lastede ressursen når applikasjonen starter.
loadChildrens eiendomsverdi består av tre deler:
Relative stier til importmoduler er nødvendige
#分隔符
Eksporter navnet på modulklassen
CommonModule-modul
Jeg nevnte at jeg ønsket å introdusere CommonModule-modulen i feature-modulen, men jeg la ikke merke til at jeg ville introdusere den i feature-modulen i starten, og som et resultat ble sidefeilen rapportert under rutingen:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Kan ikke binde til 'ngClass' siden det ikke er en kjent egenskap til 'div'.
Kan ikke binde til 'ngForOf' siden det ikke er en kjent egenskap til 'p'.
Property binding ngForOf brukes ikke av noen direktiv på en innebygd mal. Sørg for at eiendomsnavnet er stavet riktig og at alle direktiver er listet i "@NgModule.declarations".
Kan ikke binde til 'ngIf' siden det ikke er en kjent egenskap til 'div'.
......
Etter å ha sjekket lenge, fant jeg ut at det var fordi jeg ikke introduserte CommonModule i feature-modulen, og etter at jeg introduserte det, forsvant disse feilene.
CommonModule tilbyr mange ofte brukte instruksjoner i applikasjoner, inkludert NgIf og NgFor. Mer presist er direktiver som NgIf deklarert i CommonModule fra @angular/common.
Vi importerte BrowserModule-modulen i rotmodulen AppModule, som importerte CommonModule og eksporterte den på nytt. Sluttresultatet er at så lenge du importerer BrowserModule, vil du automatisk få instruksjonene i CommonModule.
Import av en BrowserModule gjør alle komponenter, direktiver og pipelines som er eksponert av modulen tilgjengelige direkte i enhver komponentmal under AppModule uten ekstra tidkrevende trinn. Men ikke importer BrowserModule til noen annen modul. Funksjonsmoduler og lat lastemoduler bør importeres til CommonModule i stedet. De krever ikke reinitialisering av hele applikasjonsnivå-leverandøren. Hvis du importerer en BrowserModule i en lat lastemodul, gir Angular en feil.
Dette er noen av problemene og oppsummeringene jeg har støtt på de siste to dagene ved bruk av Angular-underruter og lat lasting.
|
Publisert på 13.06.2019 13:13:10
|
|
|
|
