Angular 2 & 4 - 动态分配生成的组件

Question

我正在构建一个拖放功能，所以当我在页面上拖放一个元素时，我想： 1) 生成一个组件 2) 将它分配给我刚刚放置的 div。

拖放已经创建，我想出了如何使用 ViewContainerRef 创建组件

HTML

<div #parent></div>

TS

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

let childComponent = this._componentFactoryResolver.resolveComponentFactory(TextComponent); 
let anotherChildComponent = this._componentFactoryResolver.resolveComponentFactory(ullist)
this.parent.createComponent(childComponent);
this.parent.createComponent(anotherChildComponent);

我坚持的是，当我删除组件时，我不能拥有相同的 p>

我试图弄清楚如何将生成的组件分配给我单击的组件。也许生成一个随机数，然后在 *ngComponentOutlet 中插入随机数，当我单击时，我会选择生成的数字并将我创建的组件分配给它？

我的应用是基于 Angular 4 构建的，所以我尝试了 ngComponentOutlet 并创建了一个具有 4 个 div 的 plunker，当您单击一个 div 时，我想为其分配组件。或者插入它。 我拥有 3 个 div 的方式是通过从数组生成 f 的 ngFor 循环。

我想要得到的是，当我点击 DIV 时，我能够告诉具体的（具体我的意思是我点击了 div 并且每个 DIV 都有一个 ngComponentOutlet）ngComponentOutlet 它应该注入什么组件。

这里是 plunker： https://plnkr.co/edit/JvXBLOVaeaYO5bmMQa6a?p=preview

Answer 1

首先，您的 plnkr 中有错字吗？你有：

<div *ngFor="let item of items" (click)="loadComponent(item)">
    ...
    <ng-container *ngComponentOutlet="items.componentSlider"></ng-container>

应该是 item.componentSlider，而不是 items？

---

也就是说，您可以在每个项目上附加一个附加属性，例如 isLoaded：

  items:Array<any> = [
    {
      name: 'slider'
      componentSlider: sliderComponent,
      isLoaded: false
    },
    {
      name: 'user'
      componentSlider: usersComponent,
      isLoaded: false
    },
    {
      name: 'slider'
      componentSlider: sliderComponent,
      isLoaded: false
    },
    {
      name: 'alert danger'
      componentSlider: AlertDangerComponent,
      isLoaded: false
    }
  ]

然后更新您的loadComponent 方法：

loadComponent(item){
    item.isLoaded = true;
}

并更新您的模板：

<div *ngFor="let item of items" (click)="loadComponent(item)">
    <ng-container *ngIf="item.isLoaded">
       <ng-container *ngComponentOutlet="item.componentSlider"></ng-container>
    </ng-container>
</div>

这是plnkr。该组件在被点击的div 内生成。这能满足您的需要吗？