Palielinoties pieprasījumam, projekta funkcijas kļūst sarežģītākas. Šajā laikā jums ir jāmodularizē projekts un jāiepako komponenti, instrukcijas un cauruļvadi saliedētos funkcionālos blokos, kas ir pareizi, lai izpētītu apakšceļus un slinku moduļu ielādi Angular4.
Iepriekšējā izstrādē saknes modulī ir ieviesta vienkārša maršrutēšanas funkcija, ko var apkopot šādos trīs posmos:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Pievienojiet navigācijas joslu čaulas komponentam, kur komanda routerLink norāda uz maršruta galamērķi, un routerLinkActive pievieno css stilu izvēlētajai etiķetei
3. Pievienojiet maršrutētāja izejas komandu čaulas komponenta veidnei, un skats tiks parādīts tur
Tagad es vēlos ieviest apakšmaršrutus un slinku moduļu ielādi.
RouterModule.forRoot() un RouterModule.forChild()
Objekts RouterModule nodrošina divas statiskas metodes: forRoot() un forChild(), lai konfigurētu maršrutēšanas informāciju.
RouterModule.forRoot() metode tiek izmantota, lai definētu galveno maršrutēšanas informāciju galvenajā modulī, un RouterModule.forChild() ir līdzīga Router.forRoot() metodei, taču to var lietot tikai līdzekļu moduļos.
Tas nozīmē, ka forRoot() tiek izmantots saknes modulī un forChild() tiek izmantots apakšmodulī.
Viņa dēls Lu Ru
Pieņemsim, ka mūsu lapā /settings settings ir divas lapas, /settings/profile un /settings/password, kas attiecīgi apzīmē profila lapu un paroles maiņas lapu. iestatīšana kā atsevišķs funkciju bloks, ko var iekapsulēt funkciju modulī. Tam ir savi neatkarīgi maršruti, un profila un paroles lapu maršrutus var iestatīt kā apakšmaršrutus.
Modulī SettingsModule mēs izmantojam forChild() metodi, jo SettingsModule nav mūsu lietojumprogrammas galvenais modulis.
Vēl viena būtiska atšķirība ir tā, ka mēs iestatījām SettingsModule moduļa galveno ceļu uz tukšu ceļu (''). Jo, ja mēs iestatīsim ceļu uz /settings, tas atbildīs /settings/settings. Norādot tukšu ceļu, tas atbilst ceļam /settings.
Slinka iekraušana: loadBērni
Konfigurējiet iestatījumu moduļa maršrutēšanas informāciju saknes modulī AppModule:
Šeit tiek izmantots slinkās iekraušanas LoadChildren īpašums. Tā vietā, lai importētu SettingsModule AppModule, rekvizīts loadChildren norāda leņķa maršrutam ielādēt SettingsModule moduli atbilstoši ceļam, ko konfigurējis rekvizīts loadChildren. Tas ir īpašs moduļa slinkās ielādes funkcijas pielietojums, kad lietotājs piekļūst /settings/** ceļam, tiks ielādēts atbilstošais SettingsModule modulis, kas samazina ielādētā resursa lielumu, startējot lietojumprogrammu.
loadBērnu īpašuma vērtība sastāv no trim daļām:
Nepieciešami relatīvie ceļi uz moduļu importēšanu
#分隔符
Eksportējiet moduļa klases nosaukumu
CommonModule modulis
Es minēju, ka vēlos ieviest CommonModule moduli funkciju modulī, bet sākumā nepamanīju, ka vēlos to ieviest funkciju modulī, un rezultātā maršrutēšanas laikā tika ziņots par lapas kļūdu:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nevar saistīties ar 'ngClass', jo tas nav zināms 'div' rekvizīts.
Nevar saistīties ar 'ngForOf', jo tas nav zināms 'p' rekvizīts.
Rekvizītu saistošs ngForOf neizmanto neviena direktīva iegultā veidnē. Pārliecinieties, vai rekvizīta nosaukums ir uzrakstīts pareizi un visas direktīvas ir uzskaitītas "@NgModule.deklarācijās".
Nevar saistīties ar 'ngIf', jo tas nav zināms 'div' rekvizīts.
......
Pēc ilgstošas pārbaudes es atklāju, ka tas bija tāpēc, ka es neieviesu CommonModule funkciju modulī, un pēc tā ieviešanas šīs kļūdas pazuda.
CommonModule nodrošina daudzas bieži lietotas instrukcijas lietojumprogrammās, tostarp NgIf un NgFor. Precīzāk, tādas direktīvas kā NgIf tiek deklarētas CommonModule no @angular/common.
Mēs importējām BrowserModule moduli saknes modulī AppModule, kas importēja CommonModule un atkārtoti eksportēja to. Gala rezultāts ir tāds, ka, kamēr jūs importējat BrowserModule, jūs automātiski saņemsiet norādījumus CommonModule.
Importējot BrowserModule, visi komponenti, direktīvas un cauruļvadi, ko atklāj modulis, kļūst pieejami tieši jebkurā komponentu veidnē zem AppModule bez papildu garlaicīgām darbībām. Bet neimportējiet BrowserModule nevienā citā modulī. Funkciju moduļi un slinkas ielādes moduļi ir jāimportē CommonModule. Tiem nav nepieciešams atkārtoti inicializēt pilnu lietojumprogrammas līmeņa nodrošinātāju. Ja importējat BrowserModule slinkā ielādes modulī, Angular rada kļūdu.
Šīs ir dažas no problēmām un kopsavilkumiem, ar kuriem esmu saskāries pēdējo divu dienu laikā, izmantojot leņķa apakšmaršrutus un slinku ielādi.
|
Publicēts 13.06.2019 13:13:10
|
|
|
|
