Wraz ze wzrostem zapotrzebowania funkcje projektu stają się bardziej złożone. Obecnie musisz modularyzować projekt i pakować komponenty, instrukcje i potoki w spójne bloki funkcjonalne, co idealnie nadaje się do eksploracji podtras i leniwego ładowania modułów w Angular4.
W poprzednim rozwoju w module korzeniowym zaimplementowano prostą funkcję routingu, którą można podsumować w następujących trzech krokach:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Dodaj pasek nawigacyjny do komponentu powłoki, gdzie polecenie routerLink wskazuje cel trasy, a routerLinkActive dodaje styl css do wybranej etykiety
3. Dodaj polecenie router-outlet do szablonu komponentu powłoki, a widok będzie tam wyświetlany
Teraz chcę wdrożyć podtrasy i leniwe ładowanie modułów na tej podstawie.
RouterModule.forRoot() oraz RouterModule.forChild()
Obiekt RouterModule udostępnia dwie statyczne metody: forRoot() oraz forChild() do konfiguracji informacji routingu.
Metoda RouterModule.forRoot() służy do definiowania głównych informacji routingowych w module głównym, a RouterModule.forChild() jest podobna do metody Router.forRoot(), ale może być stosowana tylko w modułach cech.
To znaczy, forRoot() jest używany w module głównym, a forChild() w podmodule.
Jego syn Lu Ru
Załóżmy, że pod naszą stroną ustawień /settings, /settings/profile i /settings/password, są dwie strony, które reprezentują odpowiednio stronę profilu i stronę zmiany hasła. jako osobny blok funkcji, który można zapakować w moduł funkcjonalny. Posiada własne, niezależne trasy, a trasy dla stron profilu i haseł można ustawić jako podtrasy.
W module SettingsModule używamy metody forChild(), ponieważ SettingsModule nie jest głównym modułem naszej aplikacji.
Kolejną istotną różnicą jest to, że główną ścieżkę modułu SettingsModule ustawiamy na ścieżkę pustą (''). Bo jeśli ustawimy ścieżkę na /settings, to będzie ona odpowiadać /settings/settings. Określając pustą ścieżkę, odpowiada ścieżce /settings.
Leniwe ładowanie: loadChildren
Skonfiguruj informacje routingowe modułu ustawień w module głównym AppModule:
Tutaj używana jest właściwość leniwego ładowania LoadChildren. Zamiast importować SettingsModule do AppModule, właściwość loadChildren mówi trasie Angular o załadowanie modułu SettingsModule zgodnie ze ścieżką skonfigurowaną przez właściwość loadChildren. To jest specyficzne zastosowanie funkcji leniwego ładowania modułu: gdy użytkownik uchodzi do ścieżki /settings/**, odpowiadający moduł SettingsModule zostaje załadowany, co zmniejsza rozmiar załadowanego zasobu podczas uruchamiania aplikacji.
loadWartość nieruchomości dzieci składa się z trzech części:
Wymagane są względne ścieżki importu modułów
#分隔符
Eksportuj nazwę klasy modułu
Moduł CommonModule
Wspomniałem, że chcę wprowadzić moduł CommonModule w module cech, ale na początku nie zauważyłem, że chcę go wprowadzić w module cech, i w rezultacie błąd strony został zgłoszony podczas routingu:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Nie można powiązać z 'ngClass', ponieważ nie jest to znana właściwość 'div'.
Nie można przypisać 'ngForOf', ponieważ nie jest to znana właściwość 'p'.
Własność wiązająca ngForOf nie jest używana przez żadną dyrektywę na osadzonym szablonie. Upewnij się, że nazwa właściwości jest poprawnie zapisana i wszystkie dyrektywy są wymienione w "@NgModule.declarations".
Nie można przypisać 'ngIf', ponieważ nie jest to znana właściwość 'div'.
......
Po długim sprawdzaniu okazało się, że to dlatego, że nie wprowadziłem CommonModule w module cech, a po jego wprowadzeniu te błędy zniknęły.
CommonModule oferuje wiele powszechnie używanych instrukcji w aplikacjach, w tym NgIf i NgFor. Dokładniej, dyrektywy takie jak NgIf są deklarowane w CommonModule z @angular/common.
Zaimportowaliśmy moduł BrowserModule do głównego modułu AppModule, który zaimportował CommonModule i ponownie go wyeksportował. Efektem końcowym jest to, że jeśli zaimportujesz BrowserModule, automatycznie otrzymasz instrukcje w CommonModule.
Import BrowserModule sprawia, że wszystkie komponenty, dyrektywy i potoki udostępniane przez moduł są dostępne bezpośrednio w dowolnym szablonie komponentu w AppModule, bez dodatkowych żmudnych kroków. Ale nie importuj BrowserModule do żadnego innego modułu. Moduły funkcji i moduły leniwego ładowania powinny być importowane do CommonModule. Nie wymagają ponownego inicjalizowania pełnego dostawcy na poziomie aplikacji. Jeśli zaimportujesz BrowserModule do leniwego modułu ładowania, Angular wyświetla błąd.
To są niektóre z problemów i streszczeń, z którymi napotkałem się w ciągu ostatnich dwóch dni, korzystając z podtras Angular i leniwego ładowania.
|
Opublikowano 13.06.2019 13:13:10
|
|
|
|
