Блог

Я хочу использовать метод Angular ViewContainerRef createComponent для динамического создания компонента и добавления его в представление с определенным индексом (до или после). Если я использую ViewContainerRef.createComponent и указываю индекс 0, компонент добавляется после любых статических элементов DOM в шаблоне.

В этом примере я ожидал бы, что компонент будет добавлен перед элементом «Template Div», но вместо этого он добавляется после. Компоненты, добавленные после этого, добавляются с правильным индексом, но никогда перед статическим элементом DOM.

https://stackblitz.com/edit/angular-dynamic-components-example-n6tae1?file=src/app/app.component.ts

Добро пожаловать в Stackoverflow. Что касается вашего вопроса,

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

Ссылка: https://angular.io/api/core/ViewContainerRef#description

Другими словами, при использовании @ViewChild("container", { read: ViewContainerRef }) viewContainerRef: ViewContainerRef; вы ссылаетесь на <div #container></div> ViewContainerRef, который содержит только основные представления и встроенные представления (оба создаются динамически). Статические элементы внутри div не являются представлениями ViewContainerRef , поэтому, когда вы используете createComponent (метод, который создает представление хоста), передавая индекс в качестве второго параметра, этот индекс связан с коллекцией представлений, содержащихся в ViewContainerRef (который исключает статические элементы и включает только представления хоста и встроенные представления).

Обновить

Обходной путь для получения того, что вы хотите, делает что-то вроде этого

     <div id="main">     
    <div #containerBeforeTemplate></div>    
    <div>Template Div</div>     
    <div #containerAfterTemplate></div> 
    </div>