这篇文章主要介绍了angular6的table组件开发的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
背景及吐槽：
今年有机会再次接触angualr这个框架，想起第一次接触ng还是16年读书的时候，当时还是ng1，然后学起来特别辛苦，学习曲线特别陡峭；而今年有一个项目重构直接采用了angular6，而后面该项目后面由我负责开发和维护，然后我又重新再学习了ng6，本以为有ng1的基础，学起来会好一些，然并卵，学习的曲线特别陡峭，但还是最后将ng6啃下来（很不情愿去学的，但没办法）。回归到项目，该项目没有引入其他组件库，所以很多基础组件都是自己开发（用ng开发那种酸爽很带劲），其中table组件让我思考了差不多两个星期，最后才开发出来，吐槽完毕，接下来就介绍一下我的做法，我的做法不一定最正确。
形式：
主要参考element里面的table组的格式：
vue:
查看
所以得到了angualr的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：
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; // 获取ng-template的指引，主要是其内容，any表示该指可以是任何内容 ngAfterContentInit(): void {} } table.component.html
// 主要是用来引入整个table组件的内容，但不会在页面显示任何内容
{{label}} // 类似于v-for，主要讲table-cloumn的所有label搜集，并展示{{item[row.prop]}} // 直接展示// 展示ng-template的内容 暂无数据!
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; // 获取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的组件库。
以上就是angular6的table组件开发的实现示例的详细内容，更多请关注易知道|edz.cc其它相关文章！
