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

我坚持的是，我不能拥有相同的，因为当我删除组件时，前一个被删除的页面也会更新，因为它们共享相同的#parent

我试图想象如何将生成的组件分配给我单击的组件。也许生成一个radom数，然后在 * ngComponentOutlet 中插入随机数，当我点击时，我拿起生成的数字并将我创建的组件分配给它？

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

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

以下是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>

是商品 .componentSlider，不是商品？

也就是说，您可以在每个项目上添加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内生成的。这是否能满足您的需求？

Angular 2＆amp; 4 - 动态分配生成的组件

1 个答案: