Angular2-如何创建可重用组件

我有一个带有表格的组件，我制作了

标记，以便在您单击

th

标记时能够对数据进行排序。数据按

ASC

或

DESC

在“我的组件”中，设置单击事件和变量：

public sort_by = "name";
public sort_order = "asc";

sortTableBy(sort_by:string){
    if(sort_by === this.sort_by){
      this.sort_order = (this.sort_order === 'asc' ? 'desc' : 'asc');
    }else{
      this.sort_order = "asc";
      this.sort_by = sort_by;
    }
    this.updateData();
}

这是我的HTML模板

<th>
    <div (click)="sortTableBy('name')">
        <span>User Name</span>
        <i *ngIf="sort_by == 'name' && sort_order == 'desc'" class="fa fa-sort-up"></i>
        <i *ngIf="sort_by == 'name' && sort_order == 'asc'" class="fa fa-sort-down"></i>
    </div>
</th>

用户名

因为我会不止一次地使用这张桌子，我希望它更干净，我希望它或多或少像这样：

<th>
    <sortable sortBy="name" value="User Name"></sortable>
</th>

---

我不知道如何创建这种类型的组件以及如何在组件之间通信，只需将单击方法移动到

，如下所示

<th (click)="sortTableBy('name')" style="cursor:pointer;">
    <div>
        <span>User Name</span>
        <i *ngIf="sort_by == 'name' && sort_order == 'desc'" class="fa fa-sort-up"></i>
        <i *ngIf="sort_by == 'name' && sort_order == 'asc'" class="fa fa-sort-down"></i>
    </div>
</th>

用户名

注意：添加了一个样式，以便用户知道他可以单击它

更新1:

5

标记还将包含与字符串中硬编码的输入参数相同的单击方法

<th (click)="sortTableBy('name')">
<th (click)="sortTableBy('age')">
<th (click)="sortTableBy('gender')">

---

依此类推。

您可以创建一个名为header sortable的组件，并在父组件中使用，如下所示：

  <header-sortable [name]="'User Name'" [prop]="'name'" 
     [sortBy]="sortBy" (sort)="onSort($event)"></header-sortable>

这是组件的骨架

@Component({
  selector:'header-sortable',
  template: 
  `
   <th (click)="sortTableBy()" style="cursor:pointer;">
    <div>
        <span>{{name}}</span>
        <i *ngIf="sortBy == prop && sort_order == 'desc'" class="fa fa-sort-up"></i>
        <i *ngIf="sortBy == prop && sort_order == 'asc'" class="fa fa-sort-down"></i>
    </div>
</th>
`
})
export class HeaderSortable {
  @Input() sortBy: string;
  @Input() name: string;
  @Input() prop: string;
  @Output() sort = new EventEmitter<any>();

  sortTableBy() {
    let dir;
    if( this.sortBy == this.prop) {
       dir = this.sortBy === 'desc' ? 'asc' : 'desc';
    }
    else {
      dir  = 'desc';
    }
    this.sort.emit({prop, dir})
  }
}

@组件({
选择器：'header-sortable'，
模板：
`
{{name}}
`
})
出口级机头{
@Input（）排序为：string；
@Input（）名称：string；
@Input（）prop:string；
@Output（）sort=neweventemitter（）；
sortTableBy（）{
让迪尔；
if（this.sortBy==this.prop）{
dir=this.sortBy==='desc'？'asc'：'desc'；
}
否则{
dir='desc'；
}
this.sort.emit（{prop，dir}）
}
}

假设我在一个表中有5个

标记-我的表将被弄乱您是否正在创建

datatable

组件？是，我正在创建一个datatable组件-我找不到在服务器端对数据进行排序的datatable组件，所以我创建了一个自己的服务器端或客户端？我希望用户单击TH，然后运行send the data to the server来创建此排序，您可以看到我使用了这个。updateData（）