Angular 2显示混合元素array

我想完成的是显示数组中的所有元素。该数组包含各种类型的组件（是，组件），并且所有这些组件都从一个抽象类扩展而来。这里是我的代码：Angular 2显示混合元素array

抽象类插件

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>

来源

2017-08-04 Oscar_sgc

在哪里'targetList'声明？ – Aravind

@Aravind我编辑了澄清问题 –

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

我感谢所有的答案和评论

来源

2017-08-09 13:30:55

中找到所需的组件。没有意识到这一点。您是否可以配置组件（传递\ @input值并接收\ @output事件）？ –

@JoelJeske现在我正在努力使这项工作，如果我能做到，或者如果我找到我会让你知道的东西 –

@JoelJeske我做到了......你可以使用[这个答案]（https：/ /stackoverflow.com/a/39280103/2979805）它对我完全起作用 –

你应该在路由器的出口使用。

路由器插座用于将组件输出存储到主容器。

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

<router-outlet></router-outlet>

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

的角度路由器使导航从一个视图到下一个为用户执行应用程序的任务。

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

来源

2017-08-04 19:31:50

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

换句话说，您只能假设列表包含Plugin类型的对象。类型插件不是一个组件，所以你不能假定儿童是组件。 Angular没有很好的扩展组件的方法，所以你制作面向对象组件的想法并不成熟。

例子：

如果我创建的延伸Plugin，但不是@Component另一个类？列表如何呈现非组件？

来源

2017-08-04 19:33:36

这是正确的，我明白，现在我想呈现组件，有什么我可以用来做到这一点？ –

那么你的例子是一组固定的组件。如果情况确实如此，我会简单地对要在模板中正确呈现的组件进行硬编码。 –

当时是这样，但我想用拖放组件创建一个仪表板，所以我需要将任何类型的组件放在数组中并呈现它们 –

Angular 2显示混合元素array

回答

相关问题