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

我坚持的是，当我放下组件页面时，我无法拥有相同的，因为他们共享相同的#parent

我想知道如何将生成的组件分配给我单击的组件。也许生成一个随机数，然后将随机数插入 *ngComponentOutlet，当我单击时，我选择生成的数字并将我创建的组件分配给它？

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

我想要得到的是，当我点击 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 内生成。这是否满足您的需求？

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

Angular 2 & 4 - Assign dynamically the a generated component

angular

components

inject