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 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP云打印类完整示例
2016/10/15 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python 输出上个月的月末日期实例
2018/04/11 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
元旦晚会邀请函
2014/01/27 职场文书
自我评价的范文
2014/02/02 职场文书
上班旷工检讨书
2015/08/15 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
python热力图实现的完整实例
2022/06/25 Python