createComponent — Angular

Создаёт экземпляр ComponentRef на основе указанного типа компонента и набора параметров.

API

function createComponent<C>(
  component: Type<C>,
  options: {
    environmentInjector: EnvironmentInjector;
    hostElement?: Element | undefined;
    elementInjector?: Injector | undefined;
    projectableNodes?: Node[][] | undefined;
    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[] | undefined;
    bindings?: Binding[] | undefined;
  },
): ComponentRef<C>;

@paramcomponentType<C>

Ссылка на класс компонента.

@paramoptions

{ environmentInjector: EnvironmentInjector; hostElement?: Element | undefined; elementInjector?: Injector | undefined; projectableNodes?: Node[][] | undefined; directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[] | undefined; bindings?: Binding[] | undefined; }

Набор параметров:

environmentInjector: экземпляр EnvironmentInjector, который будет использоваться для компонента.
hostElement (необязательно): узел DOM, который должен служить узлом-хостом для компонента. Если он не указан, Angular создаёт его на основе имени тега, используемого в селекторе компонента (а если в селекторе нет информации об имени тега, использует div).
elementInjector (необязательно): экземпляр ElementInjector; дополнительную информацию о нём см. здесь.
projectableNodes (необязательно): список узлов DOM, которые следует передать через <ng-content> нового экземпляра компонента. Например, [[element1, element2]]: проецирует element1 и element2 в один и тот же <ng-content>. [[element1, element2], [element3]]: проецирует element1 и element2 в один <ng-content>, а element3 — в отдельный <ng-content>.
directives (необязательно): директивы, которые следует применить к компоненту.
bindings (необязательно): привязки, которые следует применить к корневому компоненту.

@returnsComponentRef<C>

Экземпляр ComponentRef, представляющий заданный компонент.

Примечания по использованию

В приведённом ниже примере показано, как функцию createComponent можно использовать для динамического создания экземпляра ComponentRef и его присоединения к ApplicationRef, чтобы он участвовал в циклах обнаружения изменений.

Примечание: в примере используются самостоятельные компоненты, но эту функцию также можно использовать и с несамостоятельными компонентами (объявленными в NgModule).

@Component({
  template: `Hello {{ name }}!`
})
class HelloComponent {
  name = 'Angular';
}

@Component({
  template: `<div id="hello-component-host"></div>`
})
class RootComponent {}

// Bootstrap an application.
const applicationRef = await bootstrapApplication(RootComponent);

// Locate a DOM node that would be used as a host.
const hostElement = document.getElementById('hello-component-host');

// Get an `EnvironmentInjector` instance from the `ApplicationRef`.
const environmentInjector = applicationRef.injector;

// We can now create a `ComponentRef` instance.
const componentRef = createComponent(HelloComponent, {hostElement, environmentInjector});

// Last step is to register the newly created ref using the `ApplicationRef` instance
// to include the component view into change detection cycles.
applicationRef.attachView(componentRef.hostView);
componentRef.changeDetectorRef.detectChanges();