Kysynnän kasvaessa projektin toiminnot monimutkaistuvat. Tällä hetkellä projekti täytyy modulaarisoida ja paketoida komponentit, käskyt ja putket yhtenäisiksi toiminnallisiksi lohkoiksi, mikä sopii juuri Angular4:n alireittien ja laiskan moduulien latauksen tutkimiseen.
Edellisessä kehityksessä juurimoduuliin on toteutettu yksinkertainen reititysfunktio, joka voidaan tiivistää seuraaviin kolmeen vaiheeseen:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Lisää navigointipalkki shell-komponenttiin, jossa routerLink-komento osoittaa reitin kohteeseen, ja routerLinkActive lisää css-tyylin valitulle tunnisteelle
3. Lisää router-outlet-komento shell-komponentin mallipohjaan, ja näkymä näkyy siellä
Nyt haluan toteuttaa alireitit ja laiskat moduulien lataukset tämän pohjalta.
RouterModule.forRoot() ja RouterModule.forChild()
RouterModule-objekti tarjoaa kaksi staattista menetelmää: forRoot() ja forChild() reititystiedon konfigurointiin.
RouterModule.forRoot()-menetelmää käytetään pääreititystietojen määrittämiseen päämoduulissa, ja RouterModule.forChild() on samankaltainen kuin Router.forRoot()-menetelmä, mutta sitä voidaan soveltaa vain ominaisuusmoduuleissa.
Toisin sanoen forRoot() käytetään juurimoduulissa ja forChild() alimoduulissa.
Hänen poikansa Lu Ru
Oletetaan, että /settingssettings-sivullamme on kaksi sivua, /settings/profile ja /settings/password, jotka edustavat profiilisivua ja salasanan vaihtosivua. asetus erilliseksi funktiolohkoksi, joka voidaan kapseloida ominaisuusmoduuliksi. Sillä on omat itsenäiset reittinsä, ja profiili- ja salasanasivujen reitit voidaan asettaa alireitteiksi.
SettingsModule-moduulissa käytämme forChild()-menetelmää, koska SettingsModule ei ole sovelluksemme päämoduuli.
Toinen merkittävä ero on, että asetamme SettingsModule-moduulin pääpolun tyhjäksi poluksi (''). Koska jos asetamme polun /settings-arvoon, se täsmätään /settings/settings. Määrittämällä tyhjän polun se vastaa /settings-polkua.
Laiska lataus: loadChildren
Määritä asetusmoduulin reititystiedot juurimoduulissa AppModule:
Tässä käytetään laiskaa LoadChildren-omaisuutta. Sen sijaan, että tuotaisiin SettingsModule AppModuleen, loadChildren-ominaisuus käskee Angular-reitin ladata SettingsModule-moduulin loadChildren-ominaisuuden määrittämän polun mukaisesti. Tämä on moduulin laiskan latausfunktion erityinen sovellus: kun käyttäjä käyttää /settings/**-polkua, vastaava SettingsModule-moduuli ladataan, mikä pienentää ladatun resurssin kokoa sovelluksen käynnistyessä.
loadLasten omaisuuden arvo koostuu kolmesta osasta:
Suhteelliset reitit moduulien tuontiin vaaditaan
#分隔符
Vie moduuliluokan nimi
CommonModule-moduuli
Mainitsin, että halusin tuoda CommonModule-moduulin ominaisuusmoduuliin, mutta en aluksi huomannut, että halusin tuoda sen ominaisuusmoduuliin, ja seurauksena sivuvirhe raportoitiin reitityksen aikana:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Ei voi sitoutua 'ngClassiin', koska se ei ole tunnettu ominaisuus 'div':lle.
Ei voi sitoa 'ngForOf':iin, koska se ei ole tunnettu ominaisuus 'p':lle.
Ominaisuussidonta ngForOf ei käytä missään direktiivissä upotetulla mallipohjalla. Varmista, että kiinteistön nimi on kirjoitettu oikein ja että kaikki direktiivit on listattu "@NgModule.declarations" -lomakkeeseen.
Ei voi sitoa 'ngIf':ään, koska se ei ole tunnettu ominaisuus 'div':lle.
......
Pitkän tarkistuksen jälkeen huomasin, että syynä oli se, etten ollut ottanut CommonModulea käyttöön ominaisuusmoduulissa, ja sen esittelyn jälkeen nämä virheet katosivat.
CommonModule tarjoaa monia yleisesti käytettyjä käskyjä sovelluksissa, mukaan lukien NgIf ja NgFor. Tarkemmin sanottuna direktiivit kuten NgIf julistetaan CommonModulessa @angular/commonista.
Toimme BrowserModule-moduulin juurimoduuliin AppModule, joka toi CommonModulen ja vei sen uudelleen. Lopputuloksena on, että kunhan tuot BrowserModulen, saat automaattisesti ohjeet CommonModuleen.
BrowserModulen tuonti tekee kaikki moduulin paljastamat komponentit, direktiivit ja putket saataville suoraan mihin tahansa AppModulen komponenttimalliin ilman lisätyöläisiä vaiheita. Mutta älä tuo BrowserModulea mihinkään muuhun moduuliin. Ominaisuusmoduulit ja laiskat latausmoduulit tulisi tuoda CommonModuleen. Ne eivät vaadi koko sovellustason palveluntarjoajan uudelleenkäynnistämistä. Jos tuot BrowserModulen laiskassa latausmoduulissa, Angular antaa virheen.
Tässä on joitakin ongelmia ja yhteenvetoja, joita olen kohdannut viimeisen kahden päivän aikana käyttäen Angular-alareittejä ja laiskaa latausta.
|
Julkaistu 13.6.2019 13.13.10
|
|
|
|
