Question

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

抽象类插件

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>

Answer 1

问题是您正在尝试使用通用列表中的具体元素。通用列表只能在父抽象类定义的API的元素上运行。

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

示例：

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

Answer 2

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

我感谢所有的答案和评论

Answer 3

你应该在路由器插座中使用。

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

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

<router-outlet></router-outlet>

如果你读过Router它会告诉你

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

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

Angular 2显示混合元素数组

3 个答案: