Nõudluse kasvades muutuvad projekti funktsioonid keerukamaks. Praegu tuleb projekti modulaarseks muuta ning komponendid, juhised ja torujuhtmed sidusateks funktsionaalseteks plokkideks pakkida, mis sobib just Angular4 alammarsruutide ja moodulite laisa laadimise uurimiseks.
Eelnevas arenduses on juurmoodulis rakendatud lihtne marsruutimisfunktsioon, mida saab kokku võtta järgmise kolme sammuga:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Lisa shell-komponendile navigeerimisriba, kus routerLink käsk osutab marsruudi sihtkohale ja routerLinkActive lisab valitud sildile css-stiili
3. Lisa shelli komponendi mallile ruuteri-pistikupesa käsk ja vaade kuvatakse seal
Nüüd tahan selle põhjal rakendada alammarsruute ja moodulite laiska laadimist.
RouterModule.forRoot() ja RouterModule.forChild()
RouterModule objekt pakub kahte staatilist meetodit: forRoot() ja forChild() marsruutimisinfo seadistamiseks.
RouterModule.forRoot() meetodit kasutatakse peamise marsruutimisinfo määratlemiseks põhimoodulis ning RouterModule.forChild() on sarnane Router.forRoot() meetodile, kuid seda saab rakendada ainult funktsioonimoodulites.
See tähendab, et juurmoodulis kasutatakse forRoot() ja alammoodulis forChild().
Tema poeg Lu Ru
Oletame, et meie /settings lehe all on kaks lehte: /settings/profile ja /settings/password, mis esindavad vastavalt profiililehte ja parooli muutmise lehte. seade eraldi funktsiooniplokina, mida saab kapseldada funktsioonimoodulisse. Sellel on oma iseseisvad marsruudid ning profiili ja paroolilehtede marsruudid saab määrata alammarsruutideks.
SettingsModule moodulis kasutame forChild() meetodit, sest SettingsModule ei ole meie rakenduse peamine moodul.
Teine suur erinevus on see, et seame SettingsModule mooduli põhitee tühjaks rajaks (''). Sest kui seada tee /settings, siis see kattub /settings/settings. Tühja tee määramisega vastab see /settings rajale.
Laisk laadimine: loadChildren
Seadista seadistusmooduli marsruutimisinfo juurmoodulis AppModule:
Siin kasutatakse laisa laadimisega LoadChildreni kinnistut. Selle asemel, et importida SettingsModule AppModule'i, ütleb loadChildren omadus Angular marsruudile, et laadida SettingsModule moodul vastavalt loadChildren omaduse poolt seatud rajale. See on mooduli laisa laadimisfunktsiooni konkreetne rakendus: kui kasutaja pääseb ligi /settings/** teele, laaditakse vastav SettingsModule moodul, mis vähendab laaditud ressursi suurust rakenduse käivitamisel.
loadLaste vara väärtus koosneb kolmest osast:
Vajalikud suhtelised teed moodulite importimiseks
#分隔符
Ekspordi mooduliklassi nimi
CommonModule moodul
Mainisin, et soovin CommonModule moodulit funktsioonimoodulis tutvustada, kuid alguses ei märganud, et tahan seda funktsioonimoodulis tutvustada, mistõttu teatati lehekülje viga marsruutimise ajal:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Ei saa siduda 'ngClass'-iga, kuna see ei ole 'div' tuntud omadus.
Ei saa siduda 'ngForOf'-iga, kuna see ei ole 'p' tuntud omadus.
Omaduse sidumine ngForOf, mida ei kasuta ükski direktiiv manustatud mallil. Veendu, et kinnistu nimi oleks õigesti kirjutatud ja kõik direktiivid oleksid loetletud "@NgModule.deklaratsioonides".
Ei saa siduda 'ngIf'-iga, kuna see ei ole teadaolev omadus 'div'-le.
......
Pärast pikka uurimist selgus, et põhjus oli selles, et ma ei tutvustanud CommonModule'i funktsioonimoodulisse, ja pärast selle tutvustamist kadusid need vead.
CommonModule pakub palju rakendustes sageli kasutatavaid käske, sealhulgas NgIf ja NgFor. Täpsemalt on direktiivid nagu NgIf deklareeritud CommonModule'is @angular/commonist.
Importisime BrowserModule mooduli juurmoodulisse AppModule, mis omakorda importis CommonModule'i ja eksportis selle uuesti. Lõpptulemus on see, et kui impordid BrowserModule'i, saad automaatselt juhised CommonModule'is.
BrowserModule'i importimine teeb kõik mooduli poolt avatud komponendid, direktiivid ja torujuhtmed otse kättesaadavaks mis tahes komponendimallis AppModule'i all ilma täiendavate tüütute sammudeta. Aga ära impordi BrowserModule'i ühtegi teise moodulisse. Funktsioonimoodulid ja laisad laadimismoodulid tuleks importida CommonModule'i. Need ei nõua kogu rakendustaseme teenusepakkuja taaskäivitamist. Kui impordid BrowserModule'i laisa laadimismooduli sisse, annab Angular veateate.
Need on mõned probleemid ja kokkuvõtted, millega olen viimase kahe päeva jooksul kokku puutunud Angulari alammarsruutide ja laisa laadimise abil.
|
Postitatud 13.06.2019 13:13:10
|
|
|
|
