Зі зростанням попиту функції проєкту стають складнішими. Зараз потрібно модульно розмістити компоненти, інструкції та конвеєри проєкту та пакети у цілісні функціональні блоки, що ідеально для дослідження підмаршрутів і повільного завантаження модулів в Angular4.
У попередній розробці в кореневому модулі була реалізована проста функція маршрутизації, яку можна підсумувати у наступних трьох кроках:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Додати навігаційну панель до компонента оболонки, де команда routerLink вказує на пункт призначення маршруту, а routerLinkActive додає css-стиль до обраної мітки
3. Додайте команду маршрутизатор-вихід до шаблону компонента оболонки, і там буде відображений вигляд
Тепер я хочу реалізувати підмаршрути та ліниве завантаження модулів на цій основі.
RouterModule.forRoot() та RouterModule.forChild()
Об'єкт RouterModule надає два статичних методи: forRoot() та forChild() для налаштування інформації про маршрутизацію.
Метод RouterModule.forRoot() використовується для визначення основної інформації про маршрутизацію в основному модулі, а RouterModule.forChild() схожий на метод Router.forRoot(), але його можна застосовувати лише у фічних модулях.
Тобто forRoot() використовується в кореневому модулі, а forChild() — у підмодулі.
Його син Лу Жу
Припустимо, на сторінці /settings settings є дві сторінки — /settings/profile і /settings/password, які представляють сторінку профілю та сторінку зміни пароля відповідно. як окремий функціональний блок, який можна інкапсулювати у модуль функцій. Вона має власні незалежні маршрути, а маршрути для сторінок профілю та паролів можуть бути встановлені як підмаршрути.
У модулі SettingsModule ми використовуємо метод forChild(), оскільки SettingsModule не є основним модулем нашого додатку.
Ще одна суттєва відмінність полягає в тому, що ми встановлюємо основний шлях модуля SettingsModule на порожній шлях (''). Бо якщо ми встановимо шлях на /settings, він збігається з /settings/settings. Вказуючи порожній шлях, він відповідає шляху /settings.
Ліниве завантаження: loadChildren
Налаштуйте інформацію про маршрутизацію модуля налаштування в кореневому модулі AppModule:
Тут використовується властивість LoadChildren з лінивим завантаженням. Замість імпорту SettingsModule у AppModule, властивість loadChildren каже маршруту Angular завантажити модуль SettingsModule відповідно до шляху, налаштованого властивістю loadChildren. Це специфічне застосування функції лінивого завантаження модуля: коли користувач звертається до шляху /settings/**, завантажується відповідний модуль SettingsModule, що зменшує розмір завантаженого ресурсу при запуску додатку.
loadВартість властивості Дітей складається з трьох частин:
Потрібні відносні шляхи до імпортних модулів
#分隔符
Експортувати назву класу модуля
Модуль CommonModule
Я згадував, що хочу ввести модуль CommonModule у модуль функцій, але спочатку не помітив, що хочу його ввести у модуль функцій, і в результаті помилка сторінки була зафіксована під час маршрутизації:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Не можу прив'язати до 'ngClass', оскільки це не відома властивість 'div'.
Не можу прив'язати до 'ngForOf', оскільки це не відома властивість 'p'.
Властивість зв'язування ngForOf не використовується жодною директивою на вбудованому шаблоні. Переконайтеся, що назва нерухомості написана правильно, а всі директиви наведені у розділі «@NgModule.declarations».
Не можна зв'язатися з 'ngIf', оскільки це не відома властивість 'div'.
......
Після тривалої перевірки я з'ясував, що причина в тому, що я не ввів CommonModule у модуль функцій, і після його введення ці помилки зникли.
CommonModule надає багато поширених інструкцій у застосунках, зокрема NgIf та NgFor. Точніше, такі директиви, як NgIf, декларуються в CommonModule з @angular/common.
Ми імпортували модуль BrowserModule у кореневий модуль AppModule, який імпортував CommonModule і повторно експортував його. В результаті ви імпортуєте BrowserModule, то автоматично отримаєте інструкції в CommonModule.
Імпорт BrowserModule робить усі компоненти, директиви та конвеєри, доступні модулем, безпосередньо в будь-якому шаблоні компонента під AppModule, без додаткових складних кроків. Але не імпортуйте BrowserModule у жодний інший модуль. Функціональні модулі та модулі лінивого завантаження слід імпортувати в CommonModule. Вони не потребують повторної ініціалізації повного провайдера на рівні додатка. Якщо ви імпортуєте BrowserModule у модуль лінивого завантаження, Angular видає помилку.
Ось деякі з проблем і підсумків, з якими я зіткнувся за останні два дні, використовуючи Angular subroute і ліниве завантаження.
|
Опубліковано 13.06.2019 13:13:10
|
|
|
|
