Что такое входной компонент?

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

Когда нужны входные компоненты

Входные компоненты используются, когда вы хотите загружать компоненты динамически. Это может быть необходимо в следующих случаях:

1. При использовании динамических маршрутов.
2. Для создания диалоговых окон или модальных окон.
3. Когда компонент генерируется в результате выполнения логики (например, в ответ на событие).

Пример создания входного компонента

Ниже приведен пример того, как создать и использовать входной компонент в Angular.

1. Создаем входной компонент

Создадим новый компонент, который будет динамическим и внесем его в app.module.ts в массив entryComponents.

// dynamic.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  template: `<h2>Динамический компонент</h2><p>Я был создан динамически!</p>`,
})
export class DynamicComponent {}

2. Добавляем входной компонент в модуль

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

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DynamicComponent } from './dynamic.component';

@NgModule({
  declarations: [AppComponent, DynamicComponent],
  imports: [BrowserModule],
  entryComponents: [DynamicComponent], // Указываем динамический компонент
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Динамическое создание компонента

Теперь вы можете динамически создавать DynamicComponent с помощью ComponentFactoryResolver.

// app.component.ts
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `<button (click)="addDynamicComponent()">Добавить компонент</button>
             <ng-template #container></ng-template>`,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  addDynamicComponent() {
    const componentFactory = this.resolver.resolveComponentFactory(DynamicComponent);
    this.container.createComponent(componentFactory);
  }
}

Заключение

Входные компоненты в Angular необходимы для динамического создания компонентов в приложении. Несмотря на улучшения в новейших версиях Angular, знание о входных компонентах остаётся ценным навыком, особенно при разработке сложных интерфейсов. Помните, что с появлением Ivy вам не нужно будет добавлять все динамические компоненты в entryComponents, но понимание концепции очень важно для общего развития в Angular.