Didėjant paklausai, projekto funkcijos tampa sudėtingesnės. Šiuo metu turite moduliuoti projektą ir supakuoti komponentus, instrukcijas ir vamzdynus į darnius funkcinius blokus, o tai yra tinkama tyrinėti požeminius maršrutus ir tingų modulių pakrovimą "Angular4".
Ankstesniame kūrime šakniniame modulyje buvo įdiegta paprasta maršruto parinkimo funkcija, kurią galima apibendrinti šiais trimis veiksmais:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Pridėkite naršymo juostą prie apvalkalo komponento, kur komanda routerLink nurodo maršruto paskirties vietą, o routerLinkActive prideda css stilių prie pasirinktos etiketės
3. Pridėkite maršrutizatoriaus-lizdo komandą prie apvalkalo komponento šablono ir ten bus rodomas vaizdas
Dabar noriu šiuo pagrindu įgyvendinti antrinius maršrutus ir tingų modulių pakrovimą.
RouterModule.forRoot() ir RouterModule.forChild()
Objektas RouterModule pateikia du statinius metodus: forRoot() ir forChild() maršruto parinkimo informacijai konfigūruoti.
Metodas RouterModule.forRoot() naudojamas pagrindinei maršruto parinkimo informacijai pagrindiniame modulyje apibrėžti, o RouterModule.forChild() yra panašus į Router.forRoot() metodą, tačiau jį galima taikyti tik funkcijų moduliuose.
Tai yra, forRoot() naudojamas šakniniame modulyje, o forChild() - submodulyje.
Jo sūnus Lu Ru
Tarkime, kad mūsų /nustatymų nustatymų puslapyje yra du puslapiai, /nustatymai/profilis ir /nustatymai/slaptažodis, kurie atitinkamai nurodo profilio puslapį ir slaptažodžio keitimo puslapį. nustatymą kaip atskirą funkcijų bloką, kurį galima įtraukti į funkcijų modulį. Jis turi savo nepriklausomus maršrutus, o profilio ir slaptažodžio puslapių maršrutus galima nustatyti kaip antrinius maršrutus.
"SettingsModule" modulyje naudojame forChild() metodą, nes "SettingsModule" nėra pagrindinis mūsų programos modulis.
Kitas svarbus skirtumas yra tas, kad pagrindinį "SettingsModule" modulio kelią nustatome į tuščią kelią (""). Nes jei nustatysime kelią į /settings, jis atitiks /settings/settings. Nurodžius tuščią kelią, jis atitinka /settings kelią.
Tingus pakrovimas: įkeltiVaikai
Konfigūruokite parametrų modulio maršruto parinkimo informaciją šakniniame modulyje "AppModule":
Čia naudojama tingaus pakrovimo "LoadChildren" savybė. Užuot importavus SettingsModule į AppModule, ypatybė loadChildren nurodo Angular maršrutui įkelti SettingsModule modulį pagal maršrutą, sukonfigūruotą pagal ypatybės loadChildren sukonfigūruotą kelią. Tai yra specifinis modulio tingaus įkėlimo funkcijos pritaikymas, kai vartotojas pasiekia /settings/** kelią, bus įkeltas atitinkamas SettingsModule modulis, kuris sumažina įkelto ištekliaus dydį paleidus programą.
loadVaikų turto vertė susideda iš trijų dalių:
Reikalingi santykiniai modulių importavimo keliai
#分隔符
Eksportuokite modulio klasės pavadinimą
"CommonModule" modulis
Minėjau, kad norėjau įvesti CommonModule modulį į funkcijų modulį, bet iš pradžių nepastebėjau, kad norėjau jį pristatyti funkcijų modulyje, todėl maršruto parinkimo metu buvo pranešta apie puslapio klaidą:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Negalima susieti su 'ngClass', nes tai nėra žinoma 'div' savybė.
Negalima susieti su 'ngForOf', nes tai nėra žinoma 'p' ypatybė.
Ypatybė įpareigojanti ngForOf nenaudojama jokioje įdėtojo šablono direktyvoje. Įsitikinkite, kad ypatybės pavadinimas parašytas teisingai ir visos direktyvos yra išvardytos "@NgModule.declarations".
Negalima susieti su 'ngIf', nes tai nėra žinoma 'div' savybė.
......
Ilgai patikrinęs pastebėjau, kad taip buvo todėl, kad funkcijų modulyje neįvedžiau "CommonModule", o jį įvedus šios klaidos išnyko.
"CommonModule" pateikia daug dažniausiai naudojamų instrukcijų programose, įskaitant NgIf ir NgFor. Tiksliau, tokios direktyvos kaip NgIf yra deklaruojamos CommonModule iš @angular/common.
Importavome "BrowserModule" modulį į šakninį modulį "AppModule", kuris importavo "CommonModule" ir jį eksportavo iš naujo. Galutinis rezultatas yra tas, kad tol, kol importuosite BrowserModule, automatiškai gausite instrukcijas CommonModule.
Importavus "BrowserModule", visi modulio rodomi komponentai, direktyvos ir srautai pasiekiami tiesiogiai bet kuriame "AppModule" komponento šablone be papildomų varginančių veiksmų. Tačiau neimportuokite BrowserModule į jokį kitą modulį. Funkcijų moduliai ir tingus įkėlimo moduliai turėtų būti importuojami į CommonModule. Jiems nereikia iš naujo inicijuoti viso programos lygio teikėjo. Jei importuojate "BrowserModule" į tingų įkėlimo modulį, "Angular" pateikia klaidą.
Tai yra keletas problemų ir santraukų, su kuriomis susidūriau per pastarąsias dvi dienas, naudodamas "Angular" antrinius maršrutus ir tingų įkėlimą.
|
Paskelbta 2019-06-13 13:13:10
|
|
|
|
