Efterhånden som efterspørgslen stiger, bliver projektets funktioner mere komplekse. På dette tidspunkt skal du modularisere projektet og pakke komponenter, instruktioner og pipelines i sammenhængende funktionelle blokke, hvilket er helt rigtigt til at udforske underruter og doven indlæsning af moduler i Angular4.
I den tidligere udvikling er en simpel routingfunktion implementeret i rodmodulet, som kan opsummeres i følgende tre trin:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Tilføj en navigationslinje til shell-komponenten, hvor routerLink-kommandoen peger på rutens destination, og routerLinkActive tilføjer css-stil til den valgte etiket
3. Tilføj en router-outlet-kommando til skabelonen for shell-komponenten, og visningen vil blive vist der
Nu vil jeg implementere underruter og doven indlæsning af moduler på dette grundlag.
RouterModule.forRoot() og RouterModule.forChild()
RouterModule-objektet tilbyder to statiske metoder: forRoot() og forChild() til at konfigurere routinginformationen.
RouterModule.forRoot()-metoden bruges til at definere hovedroutinginformationen i hovedmodulet, og RouterModule.forChild() ligner Router.forRoot()-metoden, men den kan kun anvendes i feature-moduler.
Det vil sige, at forRoot() bruges i rodmodulet og forChild() bruges i undermodulet.
Hans søn Lu Ru
Antag, at der er to sider under vores /settingssettings-side, /settings/profile og /settings/password, som repræsenterer henholdsvis profilsiden og adgangskodeændringssiden. opsætning som en separat funktionsblok, som kan indkapsles i et feature-modul. Den har sine egne uafhængige ruter, og ruterne for profil- og adgangskodesiderne kan sættes som underruter.
I SettingsModule-modulet bruger vi forChild()-metoden, fordi SettingsModule ikke er hovedmodulet i vores applikation.
En anden væsentlig forskel er, at vi sætter hovedstien for SettingsModule-modulet til en tom sti (''). For hvis vi sætter stien til /settings, vil det matche /settings/settings. Ved at angive en tom sti matcher den /settings-stien.
Doven indlæsning: loadChildren
Konfigurér routinginformationen for indstillingsmodulet i rodmodulet AppModule:
Den lazy loading LoadChildren-egenskab bruges her. I stedet for at importere SettingsModule til AppModule, fortæller loadChildren-egenskaben Angular-ruten at indlæse SettingsModule-modulet i henhold til den sti, loadChildren-egenskaben har konfigureret. Dette er den specifikke anvendelse af modulets lazy loading-funktion; når brugeren tilgår /settings/**-stien, vil det tilsvarende SettingsModule-modul blive indlæst, hvilket reducerer størrelsen på den indlæste ressource, når applikationen starter.
loadChildrens ejendomsværdi består af tre dele:
Relative stier til importmoduler er nødvendige
#分隔符
Eksporter navnet på modulklassen
CommonModule-modul
Jeg nævnte, at jeg gerne ville introducere CommonModule-modulet i feature-modulet, men jeg lagde ikke mærke til, at jeg ville introducere det i feature-modulet i starten, og som følge heraf blev sidefejlen rapporteret under routing:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Kan ikke binde til 'ngClass', da det ikke er en kendt egenskab ved 'div'.
Kan ikke binde til 'ngForOf', da det ikke er en kendt egenskab ved 'p'.
Property bindende ngForOf bruges ikke af nogen direktiv på en indlejret skabelon. Sørg for, at ejendomsnavnet er stavet korrekt, og at alle direktiver er opført i "@NgModule.declarations".
Kan ikke binde til 'ngIf', da det ikke er en kendt egenskab ved 'div'.
......
Efter at have tjekket længe fandt jeg ud af, at det skyldtes, at jeg ikke havde introduceret CommonModule i feature-modulet, og efter introduktionen forsvandt disse fejl.
CommonModule leverer mange almindeligt anvendte instruktioner i applikationer, herunder NgIf og NgFor. Mere præcist erklæres direktiver som NgIf i CommonModule fra @angular/common.
Vi importerede BrowserModule-modulet i rodmodulet AppModule, som igen importerede CommonModule og eksporterede det igen. Det endelige resultat er, at så længe du importerer BrowserModule, får du automatisk instruktionerne i CommonModule.
Import af et BrowserModule gør alle komponenter, direktiver og pipelines, som modulet eksponerer, tilgængelige direkte i enhver komponentskabelon under AppModule uden yderligere besværlige trin. Men importer ikke BrowserModule til noget andet modul. Feature-moduler og lazy load-moduler bør i stedet importeres til CommonModule. De kræver ikke at geninitialisere den fulde applikationsniveau-udbyder. Hvis du importerer en BrowserModule i et lazy loading module, giver Angular en fejl.
Dette er nogle af de problemer og opsummeringer, jeg er stødt på de sidste to dage ved brug af Angular-underruter og doven indlæsning.
|
Opslået på 13/06/2019 13.13.10
|
|
|
|
