Angular 2 RC1多個組件一個表

Question

概述：我正在使用Angular 2和我先前開發的API開發Todo列表。 當前，前端和后端的功能已完成。 我的新目標是在一個HTML表下將待辦事項列表的組件鏈接在一起。 待辦事項列表位於一個組件html文件（tasklist.component.html）中，而排序組件位於另一個html文件（sort.component.html）中。 這兩個組件位於父組件（todo.component.html）下。

父組件（todo.component.html）：

<h1>
  {{title}}
</h1>

<app-addtask> </app-addtask>
<app-search> </app-search>

<table border="1" style="width:100%">

  <app-sort> </app-sort> <!-- Headers -->

  <app-tasklist> </app-tasklist> <!-- Content -->

</table>

任務列表組件：

<td (click)=completeTask(item) style="width:75px;">
    <input type="checkbox" name="complete" *ngIf="!item.IsComplete" >
    <input type="checkbox" name="complete" *ngIf="item.IsComplete" checked="checked">
</td>

<td (click)=completeTask(item)> 
    <p *ngIf="item.IsComplete" style="text-decoration: line-through;">  {{item.Name}}  </p>
    <p *ngIf="!item.IsComplete" >  {{item.Name}}  </p>
</td>
<td style="width:250px;"(click)=completeTask(item) > 
    <p *ngIf="item.IsComplete" style="text-decoration: line-through;">  {{item.DueDate}}  </p>
    <p *ngIf="!item.IsComplete" >  {{item.DueDate}}  </p>
</td>

<!--<app-deletetask></app-deletetask>-->

<td style="width:115px;">
    <button type="button" (click)="deleteTask(item, $event)">Delete</button> 
</td>

排序組件：

  <td style="width:75px;" (click)="Sort('iscomplete')"><a>Complete</a></td>
  <td (click)="Sort('name')"><a>Name</a></td>
  <td style="width:250px;" (click)="Sort()"><a>Due Date</a></td>
  <td style="width:115px;">Option</td>

如果將所有組件組合在一起，則可以正確顯示數據。 但是，按照現在的方式，正在生成一個tbody標簽，該標簽拋出列。 忽略丑陋的格式。

當前帶有開發工具的網頁

我如何擁有單獨的組件，以及如何相對於競爭對手正確使用它們。

Answer 1

請看看這個答案 。

基本上，如果您想要表的結構，請嘗試使用屬性選擇器而不是自定義標記放置適當的組件。