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