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


Posted in Javascript onDecember 26, 2018

背景及吐槽:

今年有机会再次接触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一起使用,才有有效果,主要是作为模板并引入作用域,具体原理可以看一下官方文档(https://www.angular.cn/api)

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的组件库。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
原生js实现放大镜
Feb 20 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 #Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 #Javascript
微信小程序实现文字跑马灯
May 26 #Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 #Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 #Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 #Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
简单的php中文转拼音的实现代码
2014/02/11 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
前台文员职责范本
2014/03/07 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
师德师风培训感言
2015/08/03 职场文书
学校就业保障协议书
2019/06/24 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
golang json数组拼接的实例
2021/04/28 Golang
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
golang内置函数len的小技巧
2021/07/25 Golang