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

回答

相關問題