Angular2: Einfügen einer dynamischen Komponente als untergeordnetes Element eines Containers in das DOM

Gibt es eine Möglichkeit, eine Komponente dynamisch als @ einzufügeKin (kein Geschwister) eines DOM-Tags in Angular 2?

Es gibt viele Beispiele, um eine dynamische Komponente als Geschwister eines gegebenen @ einzufügeViewContainerRef 's Tag, wie (ab RC3):

@Component({
  selector: '...',
  template: '<div #placeholder></div>'
})
export class SomeComponent {
  @ViewChild('placeholder', {read: ViewContainerRef}) placeholder;

  constructor(private componentResolver: ComponentResolver) {}

  ngAfterViewInit() {
    this.componentResolver.resolveComponent(MyDynamicComponent).then((factory) => {
        this.componentRef = this.placeholder.createComponent(factory);
    });
  }
}

Aber dies erzeugt ein DOM ähnlich dem folgenden:

<div></div>
<my-dynamic-component></my-dynamic-component>

Erwartetes Ergebnis

<div>
    <my-dynamic-component></my-dynamic-component>
</div>

Verwendung derSomeComponent 'sViewContainerRef hat das gleiche Ergebnis, es fügt immer noch die generierte Komponente als Geschwister ein, nicht als untergeordnetes Element. Ich würde eine Lösung akzeptieren, bei der die Vorlage leer ist und dynamische Komponenten in die Vorlage eingefügt werden (innerhalb des Komponentenauswahl-Tags).

Die DOM-Struktur ist sehr wichtig, wenn Bibliotheken wie ng2-dragula zum Ziehen aus einer Liste dynamischer Komponenten und @ verwendet werdeVorteil aus den Modellupdates. Das zusätzliche div befindet sich in der Liste der ziehbaren Elemente, aber außerhalb des Modells, wodurch die Drag & Drop-Logik verletzt wird.

Einige sagen, es ist nicht möglich c.f. dieser Kommentar), aber es klingt nach einer sehr überraschenden Einschränkung.

Antworten auf die Frage(8)

Ihre Antwort auf die Frage