Ahogy a kereslet nő, a projekt funkciói egyre összetettebbé válnak. Ebben az időben modulárisítanod kell a projektet, és a komponenseket, utasításokat és pipeline-okat koherens funkcionális blokkokká kell csomagolni, ami tökéletes az Angular4 alútvonalainak és a modulok lustán betöltésének felfedezéséhez.
Az előző fejlesztésben egy egyszerű útvonal-függvényt valósítottak meg a gyökérmodulban, amely a következő három lépésben foglalható össze:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Adj hozzá egy navigációs sávot a shell komponenshez, ahol a routerLink parancs az útvonal célpontjára mutat, és a routerLinkActive css stílust ad a kiválasztott címkéhez
3. Adj hozzá router-outlet parancsot a shell komponens sablonjához, és ott jelenik meg a nézet
Most ezen az alapon szeretném alútvonalakat és lusta modulbetöltést betölteni.
RouterModule.forRoot() és RouterModule.forChild()
A RouterModule objektum két statikus módszert kínál: forRoot() és forChild() az útvonali információk konfigurálásához.
A RouterModule.forRoot() módszert használják a fő útvonali információk meghatározására a fő modulban, míg a RouterModule.forChild() hasonló a Router.forRoot() módszerhez, de csak funkciómodulokban alkalmazható.
Vagyis a forRoot() a gyökérmodulban, a forChild() pedig az almodulban.
Fia, Lu Ru
Tegyük fel, hogy két oldal van a /settings settings oldalunk alatt, a /settings/profile és a /settings/password, amelyek a profil oldalt és a jelszóváltási oldalt jelölik. Beállítás külön funkcióblokkként jelenik meg, amely egy funkciómodulba kapszulálható. Saját független útvonalai vannak, és a profil- és jelszóoldalak útvonalai alútvonalakként állíthatódnak be.
A SettingsModule modulban a forChild() metódust használjuk, mert a SettingsModule nem a fő modul az alkalmazásunkban.
Egy másik jelentős különbség, hogy a SettingsModule modul fő útját üres útra ('') állítjuk be. Mert ha az útvonalat /settings módra állítjuk, az egyezik a /settings/settings-ekkel. Ha üres út megadjuk, az egyezik a /settings útvonalával.
Lusta betöltés: loadChildren
Konfiguráljuk a beállítási modul útvonali adatait az AppModule gyökérmodulban:
Itt a lusta betöltési LoadChildren ingatlant használják. Ahelyett, hogy a SettingsModule importálná az AppModule-ba, a loadChildren tulajdonság megmondja az Angular útvonalnak, hogy a loadChildren által beállított útvonal szerint töltse be a SettingsModule modult. Ez a modul lusta betöltési funkciójának konkrét alkalmazása: amikor a felhasználó eléri a /settings/** útvonalat, a megfelelő SettingsModule modul töltődik be, ami csökkenti a betöltött erőforrás méretét az alkalmazás elindításakor.
loadGyermekek ingatlanértéke három részből áll:
Relatív útvonalak az importmodulokhoz szükségesek
#分隔符
Exportálni a modulosztály nevét
CommonModule modul
Említettem, hogy szeretném bevezetni a CommonModule modult a funkciómodulban, de eleinte nem vettem észre, hogy a funkció modulban akarom bevezetni, és ennek eredményeként az oldalhiba jelentett az útvonalválasztás során:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nem lehet kötni 'ngClass'-hoz, mert az nem ismert tulajdonsága a 'div'-nek.
Nem lehet 'ngForOf'-hoz kötni, mert az nem ismert tulajdonsága a 'p'-nek.
Tulajdonságkötés ngForOf, amelyet egyetlen instrukció sem használ beágyazott sablonon. Győződj meg róla, hogy az ingatlan neve helyesen van írva, és minden irányelv szerepel a "@NgModule.declarations" (.declarations" (beosztásokban).
Nem tudok kötődni az 'ngIf'-hez, mert az nem ismert tulajdonsága a 'div'-nek.
......
Hosszú utánanézés után kiderült, hogy azért van, mert nem vezettem be a CommonModule-t a funkciómodulban, és a bevezetése után ezek a hibák eltűntek.
A CommonModule számos leggyakrabban használt utasítást kínál alkalmazásokban, beleértve az NgIf és NgFor-t. Pontosabban, az olyan direktívák, mint a NgIf a CommonModule-ban vannak kihirdetve a @angular/common-ból.
A BrowserModule modult az AppModule gyökérmodulba importáltuk, amely pedig importálta a CommonModule-t és újraexportálta. A végeredmény az, hogy amíg importálod a BrowserModule-t, automatikusan megkapod az utasításokat a CommonModule-ban.
A BrowserModule importálása lehetővé teszi, hogy a modul által elérhető összes komponens, utasítás és csővezeték közvetlenül elérhető legyen bármely komponenssablonban az AppModule alatt, további fárasztó lépések nélkül. De ne importáld a BrowserModule-t más modulba. A funkciómodulokat és a lusta betöltési modulokat inkább a CommonModule-ba kell importálni. Nem igényelnek a teljes alkalmazásszintű szolgáltató újraindítását. Ha egy lusta betöltő modulba importálsz egy BrowserModule-t, az Angular hibát ad.
Ezek azok a problémák és összefoglalók, amelyekkel az elmúlt két napban találkoztam Angular alútvonalaknál és lusta betöltéssel.
|
Közzétéve 2019. 06. 13. 13:13:10
|
|
|
|
