Dynamische eckige Komponente als untergeordnetes Element einer anderen Komponente einfügen

Question

Ich habe ein paar Beispiele dafür gesehen, wie dies hier und um das Netzwerk herum gemacht wird, aber wenn ich es versuche, wird meine untergeordnete Komponente als Peer in das DOM eingefügt die Zielkomponente. Hier wird Markup Ich arbeite mit:

<div #target></div> 
<button (click)="AddTile()">Add Tile</button> 

Hier ist die übergeordnete Komponente Code:

import { Component, ComponentFactoryResolver, ViewContainerRef, ViewChild }  from '@angular/core'; 
import { TileComponent } from './tile/tile.component'; 

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 
}) 

export class AppComponent{ 
    title = 'app works!'; 

    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef; 

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {} 

    AddTile() { 
    const factory = this.componentFactoryResolver.resolveComponentFactory(TileComponent); 
    const res = this.target.createComponent(factory); 
    } 
} 

Der Ausgang dieses Codes ist:

<div #target></div> 
<tile-component></tile-component> 
<tile-component></tile-component> 

Die erwartete Ausgabe lautet:

<div #target> 
    <tile-component></tile-component> 
    <tile-component></tile-component> 
</div> 

Answer 1

Möglicherweise möchten Sie ng-container als Ziel verwenden, wodurch kein Element im DOM verbleibt. So werden Sie nur mit der Komponente bleiben in Ihrem div:

<div> 
    <ng-container #target></ng-container> 
</div>