S rostoucí poptávkou se funkce projektu stávají složitějšími. V tuto chvíli je potřeba modularizovat projekt a zabalit komponenty, instrukce a pipeline do soudržných funkčních bloků, což je přesně ideální pro zkoumání subroute a líného načítání modulů v Angular4.
V předchozím vývoji byla v kořenovém modulu implementována jednoduchá směrovací funkce, kterou lze shrnout do následujících tří kroků:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Přidat navigační lištu do shellové komponenty, kde příkaz routerLink ukazuje na cíl trasy, a routerLinkActive přidá styl css k vybranému štítku
3. Přidejte příkaz router-outlet do šablony shellové komponenty a pohled se tam zobrazí
Teď chci na tomto základě implementovat podtrasy a líné načítání modulů.
RouterModule.forRoot() a RouterModule.forChild()
Objekt RouterModule poskytuje dvě statické metody: forRoot() a forChild() pro konfiguraci směrovacích informací.
Metoda RouterModule.forRoot() se používá k definování hlavních směrovacích informací v hlavním modulu a RouterModule.forChild() je podobná metodě Router.forRoot(), ale lze ji aplikovat pouze v modulech s funkcemi.
To znamená, že forRoot() se používá v kořenovém modulu a forChild() v podmodulu.
Jeho syn Lu Ru
Představme si, že pod naší stránkou nastavení /settings jsou dvě stránky, /settings/profile a /settings/password, které představují stránku profilu a stránku pro změnu hesla. nastavení jako samostatný funkční blok, který lze zapouzdřit do modulu funkcí. Má vlastní nezávislé trasy a trasy pro profilové a heslové stránky lze nastavit jako podtrasy.
V modulu SettingsModule používáme metodu forChild(), protože SettingsModule není hlavním modulem naší aplikace.
Dalším zásadním rozdílem je, že hlavní cestu modulu SettingsModule nastavujeme na prázdnou cestu (''). Protože když nastavíme cestu na /settings, bude odpovídat /settings/settings. Zadáním prázdné cesty odpovídá cestě /settings.
Líné načítání: loadChildren
Nakonfigurujte směrovací informace modulu nastavení v kořenovém modulu AppModule:
Zde se používá vlastnost LoadChildren pro líné načítání. Místo importu SettingsModule do AppModule vlastnost loadChildren říká Angular route, aby načetla modul SettingsModule podle cesty nastavené vlastností loadChildren. Toto je specifická aplikace funkce líného načítání modulu, kdy uživatel přistupuje k cestě /settings/**, načte se odpovídající modul SettingsModule, což při spuštění aplikace zmenšuje velikost načteného zdroje.
loadHodnota majetku dětí se skládá ze tří částí:
Jsou vyžadovány relativní cesty k importu modulů
#分隔符
Exportujte název třídy modulu
Modul CommonModule
Zmínil jsem, že chci zavést modul CommonModule v modulu funkcí, ale nejdřív jsem si nevšiml, že ho chci zavést přímo v modulu funkcí, a proto byla chyba stránky hlášena během směrování:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nelze navázat na 'ngClass', protože to není známá vlastnost 'div'.
Nelze navázat na 'ngForOf', protože to není známá vlastnost 'p'.
Vlastnost vázaná ngForOf není použita žádnou direktivou na vložené šabloně. Ujistěte se, že název vlastnosti je správně napsán a všechny směrnice jsou uvedeny v "@NgModule.declarations".
Nelze navázat na 'ngIf', protože to není známá vlastnost 'div'.
......
Po dlouhém kontrole jsem zjistil, že je to proto, že jsem CommonModule v modulu funkcí nezavedl, a po jeho zavedení tyto chyby zmizely.
CommonModule poskytuje mnoho běžně používaných instrukcí v aplikacích, včetně NgIf a NgFor. Přesněji řečeno, direktivy jako NgIf jsou deklarovány ve CommonModule z @angular/common.
Importovali jsme modul BrowserModule do kořenového modulu AppModule, který importoval CommonModule a znovu ho exportoval. Výsledkem je, že pokud importujete BrowserModule, automaticky dostanete instrukce ve CommonModule.
Import BrowserModulu zpřístupňuje všechny komponenty, směrnice a pipeline zpřístupněné modulem přímo v jakékoli šabloně komponenty pod AppModulem bez dalších zdlouhavých kroků. Ale neimportujte BrowserModule do žádného jiného modulu. Feature moduly a moduly pro líné načítání by měly být importovány do CommonModule. Nevyžadují opětovné inicializaci plnohodnotného poskytovatele na úrovni aplikace. Pokud importujete BrowserModule do modulu pro líné načítání, Angular vyhodí chybu.
Toto jsou některé z problémů a shrnutí, na které jsem narazil za poslední dva dny při použití Angular subroutes a lenivého načítání.
|
Zveřejněno 13.06.2019 13:13:10
|
|
|
|
