Модуль отложенной загрузки

Последнее обновление 17 июля 2019 08:10:12 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

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

Существует три основных шага для настройки лениво загруженного функционального модуля:

Создайте функциональный модуль.
Создайте модуль маршрутизации функционального модуля.
Настройте маршруты.

Настройте приложение

Настройте угловое приложение, выполнив следующие команды

ng new customer-app -routing

Это создает приложение под названием customer-app, а флаг --routing создает файл с именем app-routing.module.ts, который является одним из файлов, необходимых для настройки отложенной загрузки для вашего функционального модуля. Перейдите в проект, введя команду cd customer-app.

Создать функциональный модуль с маршрутизацией

Далее вам потребуется функциональный модуль для маршрутизации. Чтобы сделать это, введите следующую команду в окне терминала, где клиенты - это имя модуля:

ng generate module customers -routing

Это создает папку клиентов с двумя файлами внутри; CustomersModule и CustomersRoutingModule. CustomersModule будет действовать как привратник для всего, что касается клиентов.

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

CLI импортирует CustomersRoutingModule в CustomersModule, добавляя оператор импорта JavaScript в верхней части файла и добавляя CustomersRoutingModule в массив импорта @NgModule.

Добавить компонент в функциональный модуль

Чтобы увидеть, как модуль загружается в браузере, создайте компонент для визуализации HTML-кода, когда приложение загружает CustomersModule. В командной строке введите следующее

ng generate component customers/customer-list

Это создает папку внутри клиентов под названием customer-list с четырьмя файлами, составляющими компонент.

Добавить еще один функциональный модуль

Для другого места для маршрутизации создайте второй функциональный модуль с маршрутизацией:

ng generate module orders -routing

Это создаст новую папку с именем orders, которая содержит OrdersModule и OrdersRoutingModule.

Теперь, как и в случае с CustomersModule, добавьте немного контента:

ng generate component orders/order-list

Настройте пользовательский интерфейс

Хотя вы можете ввести URL-адрес в адресную строку, навигация проще для пользователя и более распространена. Замените стандартную разметку-заполнитель в app.component.html пользовательской навигацией, чтобы вы могли легко переходить к своим модулям в браузере:

HTML-код:

<html>
  <h1>
  {{title}}
</h1>
<button routerLink="/customers">Customers</button>
<button routerLink="/orders">Orders</button>
<button routerLink="">Home</button>
<router-outlet></router-outlet>

Демонстрация в реальном времени:

См. Pen lazy_loading_app.component.html от w3resource ( @ w3resource ) в CodePen .

Чтобы кнопки работали, вам необходимо настроить модули маршрутизации.

Настройте маршруты

Два функциональных модуля, OrdersModule и CustomersModule, должны быть подключены к AppRoutingModule, чтобы маршрутизатор знал о них.

Каждый функциональный модуль действует как дверной проем через маршрутизатор. В AppRoutingModule вы настраиваете маршруты к функциональным модулям, в данном случае OrdersModule и CustomersModule. Таким образом, маршрутизатор знает, что нужно перейти к функциональному модулю. Затем функциональный модуль соединяет AppRoutingModule с CustomersRoutingModule или OrdersRoutingModule. Эти модули маршрутизации сообщают маршрутизатору, куда следует загружать соответствующие компоненты.

Маршруты на уровне приложения

В AppRoutingModule обновите массив маршрутов следующим образом:

Код TypeScript:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Демонстрация в реальном времени:

См. Pen app-routing-module.ts от w3resource ( @ w3resource ) в CodePen .

Операторы импорта остаются прежними. Первые два пути - это маршруты к CustomersModule и OrdersModule соответственно. Синтаксис отложенной загрузки использует loadChildren, за которым следует строка, представляющая собой относительный путь к модулю, хэш-знак или # и имя класса модуля.

Внутри функционального модуля

Далее, посмотрите на customer.module.ts. Если вы используете CLI и выполняете действия, описанные на этой странице, вам не нужно ничего делать здесь. Функциональный модуль подобен соединителю между AppRoutingModule и модулем маршрутизации функций. AppRoutingModule импортирует функциональный модуль, CustomersModule и CustomersModule, в свою очередь, импортирует CustomersRoutingModule.

Код TypeScript:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';
@NgModule({
  imports: [
    CommonModule,
    CustomersRoutingModule
  ],
  declarations: [CustomerListComponent]
})
export class CustomersModule { }

Демонстрация в реальном времени:

См. Pen customer.module.ts от w3resource ( @ w3resource ) в CodePen .

Файл Customers.module.ts импортирует CustomersRoutingModule и CustomerListComponent, чтобы класс CustomersModule мог иметь к ним доступ. CustomersRoutingModule затем перечисляется в массиве импорта @NgModule, предоставляя CustomersModule доступ к своему собственному модулю маршрутизации, а CustomerListComponent находится в массиве объявлений, что означает, что CustomerListComponent принадлежит к CustomersModule.

Настройте маршруты функционального модуля

Следующий шаг находится в customer-routing.module.ts. Сначала импортируйте компонент вверху файла с другими операторами импорта JavaScript. Затем добавьте маршрут в CustomerListComponent.

Код TypeScript:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustomerListComponent } from './customer-list/customer-list.component';
const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomersRoutingModule { }

Демонстрация в реальном времени:

См. Pen customer-routing.ts от w3resource ( @ w3resource ) в CodePen .

Предыдущая: Поставщики
Далее: NgModule API