Компоненты входа

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

Существует два основных вида входных компонентов:

• Загрузочный корневой компонент.
• Компонент, который вы указываете в определении маршрута.

Компонент начальной загрузки

Ниже приведен пример указания загруженного компонента AppComponent в базовом app.module.ts:

Код TypeScript:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

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

См. Pen bootstrapped_entrycomponent от w3resource ( @ w3resource ) в CodePen .

Компонент начальной загрузки является компонентом ввода, который Angular загружает в DOM во время процесса начальной загрузки (запуска приложения). Другие компоненты входа загружаются динамически с помощью других средств, например, с помощью маршрутизатора.

Angular загружает корневой AppComponent динамически, потому что он указан по типу в @ NgModule.bootstrap.

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

ПРИМЕЧАНИЕ. Компонент также может быть обязательно загружен с помощью метода ngDoBootstrap () модуля. Свойство @ NgModule.bootstrap сообщает компилятору, что это компонент ввода, и он должен сгенерировать код для начальной загрузки приложения с этим компонентом.

Компонент маршрутизируемой записи

Второй тип компонента входа встречается в определении маршрута следующим образом:

const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent
  }
];

Определение маршрута ссылается на компонент по его типу с компонентом: CustomerListComponent.

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

Массив entryComponents

Хотя у декоратора @NgModule есть массив entryComponents, большую часть времени вам не придется явно устанавливать какие-либо компоненты ввода, потому что Angular добавляет компоненты, перечисленные в @ NgModule.bootstrap, и те, которые находятся в определениях маршрута, к компонентам ввода автоматически. Хотя эти два механизма учитывают большинство компонентов ввода, если ваше приложение загружается или динамически загружает компонент по типу обязательно, вы должны явно добавить его в entryComponents.

entryComponents и компилятор

Для производственных приложений вы хотите загрузить наименьший возможный код. Код должен содержать только те классы, которые вам действительно нужны, и исключать компоненты, которые никогда не используются. По этой причине Angular-компилятор генерирует код только для компонентов, которые доступны из entryComponents; Это означает, что добавление дополнительных ссылок на @ NgModule.declarations не означает, что они обязательно будут включены в окончательный комплект.

Фактически, многие библиотеки объявляют и экспортируют компоненты, которые вы никогда не будете использовать. Например, библиотека дизайна материалов будет экспортировать все компоненты, потому что она не знает, какие из них вы будете использовать. Однако вряд ли вы будете использовать их все. Для тех, на кого вы не ссылаетесь, шейкер дерева удаляет эти компоненты из окончательного пакета кода.

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

Предыдущий: Часто используемые модули
Далее: Типы функциональных модулей