Ленивая загрузка модулей в angular позволяет нам разбивать код на отдельные модули и загружать их по требованию, что помогает разработчикам иметь поддерживаемый код и повышать производительность.

По умолчанию angular лениво загружает модули на основе пути маршрута. Ленивая загрузка модулей на основе пути маршрута подходит для большинства случаев, но иногда вам может понадобиться загрузить модуль независимо от пути маршрута. Вот некоторые из этих случаев.

  • Загрузка по нажатию кнопки без изменения маршрута.
  • Загрузите несколько модулей для текущего маршрута. В таком случае один модуль может быть загружен на основе маршрутизатора, а другие могут быть загружены вручную.
  • Динамически вставлять компоненты по некоторым критериям.

В этом посте я собираюсь показать, как лениво загружать модули вручную как императивным, так и декларативным (менее императивным) способом. Следование декларативному пути важно, когда дело доходит до фреймворков, поскольку оно гарантирует, что приложение имеет меньше кода и его можно тестировать.

С точки зрения фреймворков, просто быть декларативным означает оставить фреймворк для обработки вещей, объявив необходимые синтаксисы в шаблоне (насколько я понимаю). Когда я начал изучать разницу между императивным и декларативным способами, я понял, что написание вещей в файле *component.ts сделает вас более императивным.

Давайте начнем!!

Императив

Приведенный ниже код загружает модули и принудительно отображает их в представлении.

Причины, которые делают это императивом, следующие.

  1. Первое, что делает этот код обязательным, — это ручная подписка на метод loadModule.
  2. Далее я вижу, что мы компилируем модуль, регистрируем инжектор и разрешаем компонент.
  3. Добавление компонента в ng-container с помощью ViewContainerRef.

Декларативный (менее императивный)

Теперь давайте посмотрим на декларативную версию вышеуказанного компонента и файла шаблона. Кроме того, я бы сказал, что это менее императивно, чем декларативно, поскольку я использую некоторые операторы RxJS и загружаю модуль вручную, используя свойство load.

Ну, я думаю, вы можете увидеть разницу здесь.

  1. Во-первых, количество строк кода уменьшается.
  2. Убрана инъекция Compiler.
  3. Удалены ручная компиляция, внедрение и разрешение компонентов.
  4. Убрано ручное добавление компонента с помощью ViewContainerRef.

Спасибо Угловому!. Все вышеперечисленное стало возможным благодаря введению директивы ngComponentOutlet. В приведенном выше коде я просто загружаю модуль и разрешаю свойство component после успешной загрузки модуля.

Заверните

Я вижу, что есть много сообщений в блогах, показывающих различные способы ленивой загрузки немаршрутизируемых модулей в angular, и вы можете выбрать их в зависимости от сценариев вашего приложения.

Вы можете найти полный исходный код в этом репозитории GitHub. Надеюсь, вы узнали что-то из этого блога, как и я.

Спасибо за прочтение. Удачного кодирования. Не стесняйтесь обращаться ко мне, если таковые имеются.