angular6的table组件开发的实现示例

背景及吐槽：

今年有机会再次接触angualr这个框架，想起第一次接触ng还是16年读书的时候，当时还是ng1，然后学起来特别辛苦，学习曲线特别陡峭；而今年有一个项目重构直接采用了angular6，而后面该项目后面由我负责开发和维护，然后我又重新再学习了ng6，本以为有ng1的基础，学起来会好一些，然并卵，学习的曲线特别陡峭，但还是最后将ng6啃下来（很不情愿去学的，但没办法）。回归到项目，该项目没有引入其他组件库，所以很多基础组件都是自己开发（用ng开发那种酸爽很带劲），其中table组件让我思考了差不多两个星期，最后才开发出来，吐槽完毕，接下来就介绍一下我的做法，我的做法不一定最正确。

形式：

主要参考element里面的table组的格式：

vue:

<el-table :data="tabledata">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column label="操作">
   <template slot-scope="scope">
    <el-button @click="handleclick(scope.row)" type="text" size="small">查看</el-button>
   </template>
  </el-table-column>
 </el-table>

所以得到了angualr的table组件的格式：

<app-widget-table [data]="tabledata">
  <app-widget-table-column prop="date" label="日期"></app-widget-table-column>

  <app-widget-table-column label="操作">
   <ng-template #scope let-row="scope">
      <ng-widget-button (click)="handleclick(row)" type="text" size="small">查看</el-button>
   </ng-template>
  </app-widget-table-column>
</app-widget-table>

在angular的table组件中，最为困难就是ng-template如何将作用域绑定到ng-widget-button组件中；

关键点知识讲解：

ng-content：
可以将父组件中所包含的所有子组件，都插入table组件中ng-container所在的位置，跟vue中的slot很像；

ng-container:
可以作为一个组件的模板，跟vue里面的template组件很像；

ng-template：
该东西，是整个组件中最为麻烦的一个东西，直接使用它，会没有任何效果，必须要和templateref和ngtemplateoutlet一起使用，才有有效果，主要是作为模板并引入作用域，具体原理可以看一下官方文档（）

templateref：
主要是用来获取ng-template组件的引用；

ngtemplateoutlet：
将ng-template的内容在html页面展示出来，并绑定变量，就像vue中的router-view；

querylist：
获取table组件中所有的内容指引；

contentchildren：
内容映射的接口，针对多个子元素采用

contentchild：
内容映射的接口，针对单个子元素采用

先对app-widget-table-column组件进行分析：
该组件的作用就是为了运输数据，并且引入内容，该组件本身是不会有任何操作和逻辑，就是一个运输工；

table-column.component.html：

<ng-container></ng-container>

table-column.component.ts：

import {component, input, output, templateref, contentchild, aftercontentinit} from '@angular/core';

@component({
  selector: 'app-widget-table-column',
  templateurl: './table-column.component.html',
  styleurls: ['./table-column.component.less'],
  preservewhitespaces: false
})
export class tablecolumncomponent implements aftercontentinit {
  constructor() {

  }

  @input()
  label: string;

  @input()
  prop: string;

  @input()
  class: string;

  @input()
  style: object;

  @contentchild('scope') // 获取ng-template组件的一个本地变量，并修饰scope对象
  scope: templateref<any>; // 获取ng-template的指引，主要是其内容，any表示该指可以是任何内容

  ngaftercontentinit(): void {}
}

table.component.html

<div>
  <div>
    <ng-content></ng-content> // 主要是用来引入整个table组件的内容，但不会在页面显示任何内容
  </div>

  <table class="table">
    <thead>
    <tr>
     <th *ngfor="let label of labellist">{{label}}</th>  // 类似于v-for，主要讲table-cloumn的所有label搜集，并展示
    </tr>
    </thead>

    <tbody *ngif="data.length > 0">
    <ng-container *ngfor="let item of data; let i = index">
      <tr>
        <ng-container *ngfor="let row of tablecolumn['_results']">
          <td *ngif="row.prop" [ngstyle]="row.style" [ngclass]="row.class">{{item[row.prop]}}</td> // 直接展示

          <td *ngif="row.scope" [ngstyle]="row.style" [ngclass]="row.class">
            <ng-container *ngtemplateoutlet="row.scope; context: {$implicit: {}, scope: data[i]}">
            </ng-container> // 展示ng-template的内容
          </td>
        </ng-container>
      </tr>
    </ng-container>
    </tbody>
  </table>

  <div *ngif="data.length === 0" class="none-data">暂无数据!</div>
</div>

table.component.ts:

import {component, oninit, input, output, contentchildren, aftercontentinit, viewchild, afterviewinit, querylist} from '@angular/core';
import {tablecolumncomponent} from '../table-column/table-column.component';

@component({
  selector: 'app-widget-table',
  templateurl: './table.component.html',
  styleurls: ['./table.component.less'],
  preservewhitespaces: false
})
export class tablecomponent implements oninit, aftercontentinit {
  constructor() {

  }

  @contentchildren(tablecolumncomponent)
  tablecolumn: querylist<tablecolumncomponent>; // 获取table-cloumn组件的所有实例

  @input()
  data: object[];

  labellist: string[] = [];

  ngoninit(): void {
    if (!(this.data instanceof array)) {
      throw new error('the data into tablecomonent must be array!');
    }
  }

  ngaftercontentinit(): void {
    this.labellist = this.tablecolumn['_results'].map(item => item.label);
  }
}

虽然看起来这两个组件的代码不多，但里面的逻辑却比较绕，这也证明了ng用起来十分难上手，不过真的称赞的是，ng采用ts和rx，用上手确实是比较爽。

这两个组件目前还是比较粗糙，功能和特性也不是特别多，只能满足一般表格的需求，后续会继续完善该组件以及其他项目中用ng来开发的基础组件，希望能沉淀出一套ng的组件库。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。