ViewContainerRef — Angular

Представляет контейнер, к которому можно прикрепить одно или несколько представлений компонента.

API

abstract class ViewContainerRef {
  abstract readonly element: ElementRef<any>;
  abstract readonly injector: Injector;
  abstract readonly parentInjector: Injector;
  abstract clear(): void;
  abstract get(index: number): ViewRef | null;
  abstract readonly length: number;
  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C | undefined, options?: { index?: number | undefined; injector?: Injector | undefined; } | undefined): EmbeddedViewRef<C>;
  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C | undefined, index?: number | undefined): EmbeddedViewRef<C>;
  abstract createComponent<C>(componentType: Type<C>, options?: { index?: number | undefined; injector?: Injector | undefined; ngModuleRef?: NgModuleRef<unknown> | undefined; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown> | undefined; projectableNodes?: Node[][] | undefined; directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[] | undefined; bindings?: Binding[] | undefined; } | undefined): ComponentRef<C>;
  abstract insert(viewRef: ViewRef, index?: number | undefined): ViewRef;
  abstract move(viewRef: ViewRef, currentIndex: number): ViewRef;
  abstract indexOf(viewRef: ViewRef): number;
  abstract remove(index?: number | undefined): void;
  abstract detach(index?: number | undefined): ViewRef | null;
}

element

ElementRef<any>

Элемент-якорь, определяющий расположение этого контейнера в содержащем его представлении. Каждый контейнер представлений может иметь только один элемент-якорь, и каждый элемент-якорь может быть связан только с одним контейнером представлений.

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

Получить доступ к ViewContainerRef элемента можно, разместив на элементе Directive, внедряемую с помощью ViewContainerRef, либо используя запрос ViewChild.

injector

Injector

Инжектор зависимостей для этого контейнера представлений.

parentInjector

Injector

@deprecated

clear

void

Уничтожает все представления в этом контейнере.

@returnsvoid

get

ViewRef | null

Извлекает представление из этого контейнера.

@paramindexnumber

Индекс представления, которое нужно извлечь, начиная с 0.

@returnsViewRef | null

Экземпляр ViewRef или null, если индекс выходит за допустимый диапазон.

length

number

Возвращает количество представлений, прикрепленных к этому контейнеру в данный момент.

createEmbeddedView

2 перегрузки

Создает встроенное представление и вставляет его в этот контейнер.

@paramtemplateRefTemplateRef<C>

HTML-шаблон, определяющий представление.

@paramcontextC | undefined

Контекст привязки данных встроенного представления, указанный при использовании <ng-template>.

@paramoptions{ index?: number | undefined; injector?: Injector | undefined; } | undefined

Дополнительные параметры конфигурации создаваемого представления. Включают:

index: индекс, начиная с 0, по которому новое представление будет вставлено в этот контейнер. Если не указан, новое представление добавляется в конец.
injector: инжектор, который будет использоваться во встроенном представлении.

@returnsEmbeddedViewRef<C>

Экземпляр ViewRef для только что созданного представления.

Создает встроенное представление и вставляет его в этот контейнер.

@paramtemplateRefTemplateRef<C>

HTML-шаблон, определяющий представление.

@paramcontextC | undefined

Контекст привязки данных встроенного представления, указанный при использовании <ng-template>.

@paramindexnumber | undefined

Индекс, начиная с 0, по которому новое представление будет вставлено в этот контейнер. Если не указан, новое представление добавляется в конец.

@returnsEmbeddedViewRef<C>

Экземпляр ViewRef для только что созданного представления.

createComponent

ComponentRef<C>

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

@paramcomponentTypeType<C>

Тип компонента, который нужно использовать.

@paramoptions

{ index?: number | undefined; injector?: Injector | undefined; ngModuleRef?: NgModuleRef<unknown> | undefined; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown> | undefined; projectableNodes?: Node[][] | undefined; directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[] | undefined; bindings?: Binding[] | undefined; } | undefined

Объект с дополнительными параметрами:

index: индекс, по которому корневое представление нового компонента будет вставлено в этот контейнер. Если не указан, новое представление добавляется в конец.
injector: инжектор, используемый в качестве родительского для нового компонента.
ngModuleRef: NgModuleRef модуля NgModule компонента. Почти всегда следует указывать это значение, чтобы при создании экземпляра компонента были доступны все необходимые поставщики.
environmentInjector: EnvironmentInjector, предоставляющий среду для компонента. Почти всегда следует указывать это значение, чтобы при создании экземпляра компонента были доступны все необходимые поставщики. Этот параметр предназначен для замены параметра ngModuleRef.
projectableNodes: список узлов DOM, которые должны быть проецированы через <ng-content> нового экземпляра компонента.
directives: директивы, которые должны быть применены к компоненту.
bindings: привязки, которые должны быть применены к компоненту.

@returnsComponentRef<C>

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

insert

ViewRef

Вставляет представление в этот контейнер.

@paramviewRefViewRef

Представление, которое нужно вставить.

@paramindexnumber | undefined

Индекс, начиная с 0, по которому нужно вставить представление. Если не указан, новое представление добавляется в конец.

@returnsViewRef

Вставленный экземпляр ViewRef.

move

ViewRef

Перемещает представление в новое место в этом контейнере.

@paramviewRefViewRef

Представление, которое нужно переместить.

@paramcurrentIndexnumber

@returnsViewRef

Перемещенный экземпляр ViewRef.

indexOf

number

Возвращает индекс представления в текущем контейнере.

@paramviewRefViewRef

Представление, которое нужно найти.

@returnsnumber

Индекс позиции представления в этом контейнере, начиная с 0, или -1, если это представление не содержится в контейнере.

remove

void

Уничтожает представление, прикрепленное к этому контейнеру

@paramindexnumber | undefined

Индекс представления, которое нужно уничтожить, начиная с 0. Если не указан, удаляется последнее представление в контейнере.

@returnsvoid

detach

ViewRef | null

Открепляет представление от этого контейнера, не уничтожая его. Используйте вместе с insert(), чтобы переместить представление в пределах текущего контейнера.

@paramindexnumber | undefined

Индекс представления, которое нужно открепить, начиная с 0. Если не указан, открепляется последнее представление в контейнере.

@returnsViewRef | null

Описание

Представляет контейнер, к которому можно прикрепить одно или несколько представлений компонента.

Может содержать корневые представления (созданные путем создания экземпляра компонента с помощью метода createComponent()) и встроенные представления (созданные путем создания экземпляра TemplateRef с помощью метода createEmbeddedView()).

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

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

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

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

@Component({
  selector: 'dynamic',
  template: `<span>This is a content of a dynamic component.</span>`,
})
class DynamicComponent {
  vcr = inject(ViewContainerRef);
}

@Component({
  selector: 'app',
  template: `<main>Hi! This is the main content.</main>`,
})
class AppComponent {
  vcr = inject(ViewContainerRef);

  ngAfterViewInit() {
    const compRef = this.vcr.createComponent(DynamicComponent);
    compRef.changeDetectorRef.detectChanges();
  }
}