С ростом спроса функции проекта становятся более сложными. В данный момент нужно модульно разобрать компоненты, инструкции и конвейеры проекта в цельные функциональные блоки, что идеально подходит для изучения подмаршрутов и ленивой загрузки модулей в Angular4.
В предыдущей разработке в корневом модуле была реализована простая функция маршрутизации, которую можно резюмировать в следующих трёх шагах:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Добавить панель навигации в компонент shell, где команда routerLink указывает на конечную точку маршрута, а routerLinkActive добавляет стиль css к выбранной метке
3. Добавьте команду router-outlet в шаблон компонента shell, и там будет отображаться вид
Теперь я хочу реализовать подмаршруты и ленивую загрузку модулей на этой основе.
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 в feature module, но сначала не заметил, что хочу его ввести в feature module, и в результате ошибка страницы была зафиксирована при маршрутизации:
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 выдает ошибку.
Вот некоторые из проблем и резюме, с которыми я столкнулся за последние два дня при использовании угловых подмаршрутов и ленивой загрузки.
|
Опубликовано 13.06.2019 13:13:10
|
|
|
|
