角度コンポーネントを他のコンポーネントの子として動的に挿入する

Question

ここでは、これを行う方法とネットの周りのいくつかの例を見てきましたが、試してみると、子コンポーネントがDOMのピアとして挿入されますターゲットコンポーネントここ は、私が働いているマークアップである：ここでは

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

は、親コンポーネントのコードです：

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); 
    } 
} 

このコードの出力は次のとおりです。

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

予想される出力は次のようになります。

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

Answer 1

ng-containerをターゲットとして使用し、DOMに要素を残さないようにすることができます。 div：

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