Angular 2 显示混合元素数组答案

【问题标题】：Angular 2 show mixed elements arrayAngular 2 显示混合元素数组
【发布时间】：2018-01-12 19:50:19
【问题描述】：

我想要完成的是显示数组中的所有元素。该数组包含各种类型的组件（是的，组件），所有这些组件都从一个抽象类扩展而来。

这是我的代码：

抽象类插件：

export abstract class Plugin {
constructor() { }
}

观看组件：

@Component({
selector: 'watch',
template: `
    {{clock | async | date:'medium'}} 
 `
})

export class WatchCmpt extends Plugin {
    clock = Observable.interval(1000).map(() => new Date())
    constructor() {
      super();
    }
}

演示组件：

@Component({
selector: 'demo',
template: `
    <h1>Hello {{name}}</h1>
`
})

export class DemoCmpt extends Plugin {
     name: string = "Jose";
     constructor() {
        super();
     }
}

我在我的视图中使用此代码在我的 html 文件中显示它：

<? *ngFor="let target of targetList; let x = index">{{target}} </?>

我应该在<?> 中使用什么？

targetList 是一个这样的数组： [demo, watch]

编辑：

@Component({
    selector: 'dndPanel',
    templateUrl: 'dragNdropPanel.cmpt.html'
 })

export class DragNDropPanelCmpt {
   @ViewChild(DemoCmpt) demo1: DemoCmpt;
   @ViewChild(WatchCmpt) watch: WatchCmpt;

   constructor() {
   }

   targetList: Plugin[] = [
      this.demo1,
      this.watch,
   ];

   addTo($event: any) {
      this.targetList.push($event.dragData);
  }
}

这是完整的 HTML：

   div class="col-sm-6">
    <div class="panel panel-info" dnd-sortable-container [sortableData]="targetList">
        <div class="panel-heading">Target List</div>
        <div class="panel-body" dnd-droppable (onDropSuccess)="addTo($event)" [dropZones]="['source-dropZone']">
            <ul class="list-group">
                <li *ngFor="let target of targetList; let x = index" class="list-group-item" dnd-sortable [sortableIndex]="x" [dragEnabled]="true">
                    {{target}}
                </li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

targetList 声明在哪里？
@Aravind 我编辑了问题以便澄清

标签： javascript html arrays angular

【解决方案1】：

问题是您试图在通用列表中使用具体元素。通用列表只能在父抽象类定义的 API 中对其元素进行操作。

换句话说，您只能假设列表包含Plugin 类型的对象。类型插件不是组件，因此您不能假设子组件是组件。 Angular 没有很好的方法来扩展组件，因此您制作 OO 组件的想法行不通。

例子：

如果我创建了另一个扩展Plugin 但不是@Component 的类怎么办？列表将如何呈现非组件？

【讨论】：

这是正确的，我明白，现在我想渲染组件，有什么可以用来做的吗？
您的示例是一组固定的组件。如果真的是这样，我会简单地在模板中硬编码你想要渲染的组件。
当时是这样，但是我想创建一个带有拖放组件的仪表板，所以我需要将任何类型的组件放入数组中并渲染它们
这是有道理的。我会查看以下任一指南：Dynamic component loader 或更简单的 NgSwitch。该开关将允许您检测组件类型并在模板中呈现所需的组件

【解决方案2】：

我可以使用 ComponentFactory 实现我所需要的。我在this 网站上发现了一篇有趣的文章，它完全符合我的要求：在一个列表中的单个视图中渲染许多不同的组件，而无需使用 ngSwitch 或其他更复杂的（对我而言）任务进行硬编码。

感谢所有答案和cmets

【讨论】：

很棒的发现。没有意识到这一点。您是否能够配置组件（传递 \@input 值并接收 \@output 事件）？
@JoelJeske 现在我正在努力做到这一点，如果我能做到，或者如果我找到什么我会告诉你的
@JoelJeske 我做到了...您可以使用this answer 它对我来说非常有效

【解决方案3】：

你应该在<?>路由器插座上使用。

Router outlet 用于将组件输出循环到主容器。

您使用插座作为添加到模板超类的标记。

<router-outlet></router-outlet>

如果你读过Router，它会告诉你

当用户执行应用程序任务时，Angular 路由器可以从一个视图导航到下一个视图。

设计组件的问题是面向对象的，并且没有通用的覆盖接口。因此，编码执行起来有点困难，尤其是使用卡片布局将一个组件撞到另一个组件上。

【讨论】：