Question

我有一个带有表格的组件，当我点击<th></th>标记时，我创建了th标记，以便能够对数据进行排序，数据按ASC排序DESC

在我的组件中设置click事件和变量：

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>

我不知道如何创建此类组件以及如何在组件之间进行通信

Answer 1

您可以创建一个名为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})
  }
}

Answer 2

只需将点击方法移至<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>标签也将包含相同的点击方法，输入参数为字符串中的硬编码。

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

等等。

Angular2 - 如何创建可重用的组件

2 个答案: