您好,登錄后才能下訂單哦!
背景及吐槽:
今年有機(jī)會(huì)再次接觸angualr這個(gè)框架,想起第一次接觸ng還是16年讀書的時(shí)候,當(dāng)時(shí)還是ng1,然后學(xué)起來特別辛苦,學(xué)習(xí)曲線特別陡峭;而今年有一個(gè)項(xiàng)目重構(gòu)直接采用了angular6,而后面該項(xiàng)目后面由我負(fù)責(zé)開發(fā)和維護(hù),然后我又重新再學(xué)習(xí)了ng6,本以為有ng1的基礎(chǔ),學(xué)起來會(huì)好一些,然并卵,學(xué)習(xí)的曲線特別陡峭,但還是最后將ng6啃下來(很不情愿去學(xué)的,但沒辦法)?;貧w到項(xiàng)目,該項(xiàng)目沒有引入其他組件庫(kù),所以很多基礎(chǔ)組件都是自己開發(fā)(用ng開發(fā)那種酸爽很帶勁),其中table組件讓我思考了差不多兩個(gè)星期,最后才開發(fā)出來,吐槽完畢,接下來就介紹一下我的做法,我的做法不一定最正確。
形式:
主要參考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組件中;
關(guān)鍵點(diǎn)知識(shí)講解:
ng-content:
可以將父組件中所包含的所有子組件,都插入table組件中ng-container所在的位置,跟vue中的slot很像;
ng-container:
可以作為一個(gè)組件的模板,跟vue里面的template組件很像;
ng-template:
該東西,是整個(gè)組件中最為麻煩的一個(gè)東西,直接使用它,會(huì)沒有任何效果,必須要和TemplateRef和ngTemplateOutlet一起使用,才有有效果,主要是作為模板并引入作用域,具體原理可以看一下官方文檔(https://www.angular.cn/api)
TemplateRef:
主要是用來獲取ng-template組件的引用;
ngTemplateOutlet:
將ng-template的內(nèi)容在html頁(yè)面展示出來,并綁定變量,就像vue中的router-view;
QueryList:
獲取table組件中所有的內(nèi)容指引;
ContentChildren:
內(nèi)容映射的接口,針對(duì)多個(gè)子元素采用
ContentChild:
內(nèi)容映射的接口,針對(duì)單個(gè)子元素采用
先對(duì)app-widget-table-column組件進(jìn)行分析:
該組件的作用就是為了運(yùn)輸數(shù)據(jù),并且引入內(nèi)容,該組件本身是不會(huì)有任何操作和邏輯,就是一個(gè)運(yùn)輸工;
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組件的一個(gè)本地變量,并修飾scope對(duì)象 scope: TemplateRef<any>; // 獲取ng-template的指引,主要是其內(nèi)容,any表示該指可以是任何內(nèi)容 ngAfterContentInit(): void {} }
table.component.html
<div> <div> <ng-content></ng-content> // 主要是用來引入整個(gè)table組件的內(nèi)容,但不會(huì)在頁(yè)面顯示任何內(nèi)容 </div> <table class="table"> <thead> <tr> <th *ngFor="let label of labelList">{{label}}</th> // 類似于v-for,主要講table-cloumn的所有l(wèi)abel搜集,并展示 </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的內(nèi)容 </td> </ng-container> </tr> </ng-container> </tbody> </table> <div *ngIf="data.length === 0" class="none-data">暫無數(shù)據(jù)!</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組件的所有實(shí)例 @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); } }
雖然看起來這兩個(gè)組件的代碼不多,但里面的邏輯卻比較繞,這也證明了ng用起來十分難上手,不過真的稱贊的是,ng采用ts和rx,用上手確實(shí)是比較爽。
這兩個(gè)組件目前還是比較粗糙,功能和特性也不是特別多,只能滿足一般表格的需求,后續(xù)會(huì)繼續(xù)完善該組件以及其他項(xiàng)目中用ng來開發(fā)的基礎(chǔ)組件,希望能沉淀出一套ng的組件庫(kù)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。