<强>背景及吐槽:
今年有机会再次接触angualr这个框架,想起第一次接触ng还是16年读书的时候,当时还是ng1,然后学起来特别辛苦,学习曲线特别陡峭;而今年有一个项目重构直接采用了angular6,而后面该项目后面由我负责开发和维护,然后我又重新再学习了ng6,本以为有ng1的基础,学起来会好一些,然并卵,学习的曲线特别陡峭,但还是最后将ng6啃下来(很不情愿去学的,但没办法)。回归到项目,该项目没有引入其他组件库,所以很多基础组件都是自己开发(用ng开发那种酸爽很带劲),其中表组件让我思考了差不多两个星期,最后才开发出来,吐槽完毕,接下来就介绍一下我的做法,我的做法不一定最正确。
<强>形式:
主要参考元素里面组的表的格式:
vue:
& lt; el-table:数据=" https://www.yisu.com/zixun/tableData "比;
& lt; el-table-column道具=叭掌凇北昵?叭掌凇弊４? lt;/el-table-column>
& lt; el-table-column标签="操作“比;
& lt;模板slot-scope=胺段А北?
& lt; el-button @click=" handleClick scope.row " type=" text "大?靶 钡脑诓榭? lt;/el-button>
& lt;/template>
& lt;/el-table-column>
& lt;/el-table>
所以得到了angualr的表组件的格式:
& lt; app-widget-table(数据)=皌ableData”比;
& lt; app-widget-table-column道具=叭掌凇北昵?叭掌凇弊４? lt;/app-widget-table-column>
& lt; app-widget-table-column标签="操作“比;
& lt; ng-template #范围let-row="范围"比;
& lt; ng-widget-button(点击)=" handleClick(行)”类型=拔谋尽贝笮=靶 钡脑诓榭? lt;/el-button>
& lt;/ng-template>
& lt;/app-widget-table-column>
& lt;/app-widget-table>
之前
在角的表组件中,最为困难就是ng-template如何将作用域绑定到ng-widget-button组件中,
关键点知识讲解:
<强> ng-content:
可以将父组件中所包含的所有子组件,都插入表组件中ng-container所在的位置,vue中跟的槽很像。
<强> ng-container:
可以作为一个组件的模板,跟vue里面的模板组件很像;
<强> ng-template:
该东西,是整个组件中最为麻烦的一个东西,直接使用它,会没有任何效果,必须要和TemplateRef和ngTemplateOutlet一起使用,才有有效果,主要是作为模板并引入作用域,具体原理可以看一下官方文档(https://www.angular.cn/api)
<强> TemplateRef:
主要是用来获取ng-template组件的引用;
<强> ngTemplateOutlet:
将ng-template的内容在html页面展示出来,并绑定变量,就像vue中的router-view;
<强> QueryList:
获取表组件中所有的内容指引;
<强> ContentChildren:
内容映射的接口,针对多个子元素采用
<强> ContentChild:
内容映射的接口,针对单个子元素采用
先对app-widget-table-column组件进行分析:
该组件的作用就是为了运输数据,并且引入内容,该组件本身是不会有任何操作和逻辑,就是一个运输工;
table-column.component.html:
& lt; ng-container> & lt;/ng-container>
table-column.component.ts:
进口{组件、输入、输出、TemplateRef ContentChild, AfterContentInit} ' @angular/核心”;
@ component ({
选择器:“app-widget-table-column”,
templateUrl:“。/table-column.component.html”,
styleUrls: [’。/table-column.component.less '),
preserveWhitespaces:假
}）
出口类TableColumnComponent实现AfterContentInit {
构造函数(){
}
@Input ()
标签:字符串;
@Input ()
道具:字符串;
@Input ()
类:字符串;
@Input ()
风格:对象;
@ContentChild(范围)//获取ng-template组件的一个本地变量,并修饰范围对象
范围:TemplateRef;//获取ng-template的指引,主要是其内容,任何表示该指可以是任何内容
ngAfterContentInit():空白{}
}
table.component.html
& lt; div>
& lt; div>
& lt; ng-content> & lt;/ng-content>//主要是用来引入整个表组件的内容,但不会在页面显示任何内容
& lt;/div>
& lt;表类=氨怼痹?
& lt; thead>
& lt; tr>
& lt; th * ngFor=發abelList让标签”在{{标签}}& lt;/th>//类似于v),主要讲table-cloumn的所搜有标签集,并展示
& lt;/tr>
& lt;/thead>
& lt; tbody * ngIf=笔荨３ざ缺?0”比;
& lt; ng-container * ngFor=叭孟钅渴?让我=指数”比;
& lt; tr>
& lt; ng-container * ngFor=叭门舤ableColumn [' _results ']”比;
& lt; td * ngIf=毙小５谰摺癧ngStyle]="行。风格”[ngClass]=" row.class "在{{item [row.prop]}} & lt;/td>//直接展示
& lt; td * ngIf=毙小７段А盵ngStyle]="行。风格”[ngClass]=" row.class "比;
& lt; ng-container * ngTemplateOutlet=皉ow.scope;背景:{$隐式:{},范围:数据[我]}”在
& lt;/ng-container>//展示ng-template的内容
& lt;/td>
& lt;/ng-container>
& lt;/tr>
& lt;/ng-container>
& lt;/tbody>
& lt;/table>
& lt; div * ngIf=笔荨３ざ?==0”类=" none-data "祝辞暂无数据! & lt;/div>
& lt;/div>
