动态插入角度组件作为另一个组件的孩子

我已经看到了一些如何在这里和周围的网络做到这一点的例子，但是当我尝试它时，我的子组件插入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>

来源

2017-09-16 Lazloman

您打算使用基于用户操作的不同动态组件吗？ – Aravind

不，相同的组件。它也不会基于用户操作，但是我需要在运行时动态添加不同数量的这些组件。我在这里使用按钮作为POC的一部分。 – Lazloman

您可能希望使用ng-container作为目标，这不会在DOM中留下任何元素。因此，您将只剩下div中的组件：

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

来源

2017-09-16 23:59:15

这是行不通的。我曾尝试过使用div，这产生了相同的结果，除了当然div仍然在DOM中，尽管这不是一个显示限制，但它仍然是不受欢迎的。谢谢 – Lazloman

不客气。我现在想知道，因为组件总是相同的，你不能只在你的模板中添加'ngFor'来循环一个虚拟数组，它的长度是你需要的组件数量？ –

这也是一个选项。我正在调查各种方式来做到这一点。循环可能实际上是最简单的。 – Lazloman

动态插入角度组件作为另一个组件的孩子

回答

相关问题