Jak zdefiniować miejsce, w którym wstrzykiwano komponenty dynamiczne? - angularjs, dynamic, maszynopis, kątowe, komponenty

Moje komponenty są wstrzykiwane dynamicznie. Ale jak zdefiniować miejsce, w którym byłyby bez opakowania?

import { Component, ViewContainerRef, ComponentResolver } from "@angular/core";

constructor(
private apiService: ApiService,
private viewContainerRef: ViewContainerRef,
private componentResolver: ComponentResolver) {
}

create() {
this.componentResolver.resolveComponent(PieChart).then((factory) => {
this.viewContainerRef.createComponent(factory);
});
}

I chcę je wstrzyknąć w DIV.

<div class="someClass">
<!--How inject them here?  -->
</div>

Odpowiedzi:

Istnieją dwa sposoby:

• wstrzykiwać ViewContainerRef jak w pytaniu, a następnie nowe komponenty są dodawane poniżej tego komponentu

• za pomocą elementu docelowego w szablonie komponentów ze zmienną szablonu, np <div #target></div> i @ViewChild("target", {read: ViewContainerRef}) viewContainerRef:ViewContainerRef; aby uzyskać ViewContainerRef tego <div>. Dodane elementy są ponownie dodawane poniżej <div>

createComponent() pozwala przekazać indeks. Domyślnie nowe komponenty są zawsze dodawane na końcu, ale jeśli przekazujesz indeks, to wstawiany jest w tej pozycji.
(nie testowane) z indeksem 0 powinieneś być w stanie dodać nowy element przed elementem docelowym.
Jeśli dodasz więcej niż jeden składnik do tego samego ViewContainerRef możesz przekazać indeks, aby wstawić nowy komponent przed dodanymi wcześniej elementami.

W wersji finalnej narzędzie ComponentResolver jest przestarzałe. Zamiast tego możemy użyć Compiler API do stworzenia ComponentFactory.

Ale jak możemy to teraz zrobić?

Znalazłem ten artykuł http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/ ale kompilator nie ma metody compileComponentAsync.