S rastúcim dopytom sa funkcie projektu stávajú zložitejšími. Momentálne je potrebné modularizovať projekt a zabaliť komponenty, inštrukcie a pipeline do súdržných funkčných blokov, čo je ideálne na preskúmanie podtras a lenivého načítavania modulov v Angular4.
V predchádzajúcom vývoji bola v koreňovom module implementovaná jednoduchá smerovacia funkcia, ktorú možno zhrnúť do nasledujúcich troch krokov:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Pridať navigačný panel do shellovej komponenty, kde príkaz routerLink ukazuje na cieľ trasy a routerLinkActive pridá štýl css k vybranému štítku
3. Pridať príkaz router-outlet do šablóny shell komponentu a pohľad sa tam zobrazí
Teraz chcem implementovať subroute a lenivé načítavanie modulov na tomto základe.
RouterModule.forRoot() a RouterModule.forChild()
Objekt RouterModule poskytuje dve statické metódy: forRoot() a forChild() na konfiguráciu smerovacích informácií.
Metóda RouterModule.forRoot() sa používa na definovanie hlavných smerovacích informácií v hlavnom module a RouterModule.forChild() je podobná metóde Router.forRoot(), ale môže byť aplikovaná iba v moduloch s funkciami.
To znamená, že forRoot() sa používa v koreňovom module a forChild() v podmodule.
Jeho syn Lu Ru
Predstavme si, že pod stránkou nastavení /settings sú dve stránky, /settings/profile a /settings/password, ktoré predstavujú stránku profilu a stránku na zmenu hesla. nastaviť ako samostatný funkčný blok, ktorý je možné zapuzdriť do modulu funkcií. Má vlastné nezávislé trasy a trasy pre profilové a heslové stránky môžu byť nastavené ako podtrasy.
V module SettingsModule používame metódu forChild(), pretože SettingsModule nie je hlavný modul našej aplikácie.
Ďalším významným rozdielom je, že hlavnú cestu modulu SettingsModule nastavíme na prázdnu cestu (''). Pretože ak nastavíme cestu na /settings, zladí sa s /settings/settings. Špecifikovaním prázdnej cesty zodpovedá ceste /settings.
Lenivé načítavanie: loadChildren
Nakonfigurujte smerovacie informácie modulu nastavení v koreňovom module AppModule:
Tu sa používa vlastnosť lenivého načítavania LoadChildren. Namiesto importovania SettingsModule do AppModule vlastnosť loadChildren hovorí Angular route, aby načítala modul SettingsModule podľa cesty nastavenej vlastnosťou loadChildren. Toto je špecifická aplikácia funkcie lenivého načítavania modulu, keď používateľ pristupuje k ceste /settings/**, načíta sa príslušný modul SettingsModule, čo pri spustení aplikácie zmenšuje veľkosť načítaného zdroja.
loadHodnota majetku detí pozostáva z troch častí:
Sú potrebné relatívne cesty na import modulov
#分隔符
Exportujte názov triedy modulu
Modul CommonModule
Spomenul som, že chcem zaviesť modul CommonModule v module funkcií, ale spočiatku som si nevšimol, že ho chcem predstaviť priamo v module funkcií, a preto sa chyba stránky hlásila počas smerovania:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nedá sa naviazať na 'ngClass', pretože to nie je známa vlastnosť 'div'.
Nedá sa naviazať na 'ngForOf', pretože to nie je známa vlastnosť 'p'.
Vlastnosť viazaná ngForOf sa nepoužíva žiadnou direktívou na vloženej šablóne. Uistite sa, že názov vlastnosti je správne napísaný a všetky smernice sú uvedené v "@NgModule.declarations".
Nedá sa naviazať na 'ngIf', pretože to nie je známa vlastnosť 'div'.
......
Po dlhom kontrole som zistil, že je to preto, že som CommonModule nezaviedol v module funkcií, a po jeho zavedení tieto chyby zmizli.
CommonModule poskytuje mnoho bežne používaných inštrukcií v aplikáciách, vrátane NgIf a NgFor. Presnejšie, direktívy ako NgIf sú deklarované v CommonModule z @angular/common.
Importovali sme modul BrowserModule do root modulu AppModule, ktorý importoval CommonModule a znovu ho exportoval. Výsledkom je, že pokiaľ importujete BrowserModule, automaticky dostanete inštrukcie v CommonModule.
Importom BrowserModulu sú všetky komponenty, direktívy a pipeline sprístupnené modulom priamo v akejkoľvek šablóne komponentu pod AppModulom bez ďalších zdĺhavých krokov. Ale neimportuj BrowserModule do žiadneho iného modulu. Moduly funkcií a moduly lenivého načítavania by sa mali importovať do CommonModule. Nevyžadujú opätovnú inicializáciu plnohodnotného poskytovateľa aplikácie. Ak importujete BrowserModule do lenivého načítavacieho modulu, Angular vyhodí chybu.
Toto sú niektoré z problémov a súhrnov, na ktoré som sa stretol za posledné dva dni pomocou Angular subroutes a lenivého načítavania.
|
Zverejnené 13. 6. 2019 13:13:10
|
|
|
|
