上篇简要介绍了Util在Angular Ts方面的封装情况，本文介绍Angular封装的另一个部分，即Html的封装。
标准组件与业务组件
对于管理后台这样的表单系统，你通常会使用Angular Material或Ng-Zorro这样的UI组件库，它们提供了标准化的UI组件。
标准组件将Ts封装起来，以特定标签和属性的方式提供使用。
业务组件使用标准组件拼凑页面，并从服务端API获取数据绑定到页面上。
可以看出，标准组件是业务开发的基础，我们必须将标准组件的开发效率提升到极致。
使用标准组件的问题
直接使用原生标准组件有什么问题呢?
复杂的Html结构
现代流行的UI组件库，为了构造美观大气的视觉效果及增强组件的功能特性，一个组件需要组装多个Html元素来表达。
在带来美观视觉体验的同时，也导致了Html结构变得很复杂。
Angular Material是Google以Material设计风格开发的UI组件库。
我们来看一个Angular Material文本框的例子。
<mat-form-field> <input matInput placeholder="Favorite food" value="Sushi"> </mat-form-field>
你看到了Angular Material文本框并不是一个input标签，input标签嵌套在mat-form-field标签内。
这看上去并不算复杂，不过它只是最简单的情况，让我们增加两个特性。
<mat-form-field> <input matInput placeholder="测试一下" [(ngModel)]="value" > <mat-hint>哈哈</mat-hint> <button mat-button *ngIf="value" matSuffix mat-icon-button (click)="value=''"> <mat-icon>close</mat-icon> </button> </mat-form-field>
我们在文本框的下方添加了提示文本，并在文本框右侧加了个按钮，你可以点击这个按钮清空文本框的内容。
你应该观察到Html结构变得稍微复杂了，让我们再添加两个特性。
<mat-form-field> <input matInput #testControl="ngModel" name="test" placeholder="金额" [(ngModel)]="value" required max="10"> <span matPrefix>$ </span> <span matSuffix>元</span> <mat-hint>充值金额</mat-hint> <button mat-button *ngIf="value" matSuffix mat-icon-button (click)="value=''"> <mat-icon>close</mat-icon> </button> <mat-error *ngIf="testControl.hasError('max') && !testControl.hasError('required')"> 最大金额不能超过10元 </mat-error> <mat-error *ngIf="testControl.hasError('required')"> 这是一个必填项 </mat-error> </mat-form-field>
现在在文本框的左侧加了一个美元符号，在文本框右侧添加了后缀“元”，另外添加了必填和最大值验证。
这还只是一个不太复杂的文本框，Html居然这么长。
组件标签结构成为前端业务开发的第一个关注点。
繁琐的数据绑定
如果要绑定一些可选项到下拉列表，一种办法是硬编码。
<mat-form-field> <mat-select placeholder="请选一个吧"> <mat-option value="1">A</mat-option> <mat-option value="2">B</mat-option> <mat-option value="3">C</mat-option> </mat-select> </mat-form-field>
这是具有三个选项的下拉列表。
如果我们要绑定56个民族，就需要硬编码56个选项，这确实可行，不过一个下拉框就60几行，占地太广，复制粘贴也不方便。
另外，下拉选项可能是动态的，这些可选值存储在数据库中。
数据绑定大多从服务端获取数据，绑定到组件上。
Angular提倡将数据访问与组件分离，这个设计理念被Angular Material这些标准组件库所遵循。
为了绑定数据，你首先需要发送一个Http请求，从服务端获取Json数据，转换为Ts对象，然后通过Angular提供的循环语法绑定上去。
<mat-form-field> <mat-select placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> {{food.viewValue}} </mat-option> </mat-select> </mat-form-field>
Angular Material下拉列表能够分组，它与普通下拉列表的Html结构不同，如果服务端返回的数据格式不太友好，绑定起来将更加困难。
<mat-form-field> <mat-select placeholder="Pokemon" [formControl]="pokemonControl"> <mat-option>-- None --</mat-option> <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled"> <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value"> {{pokemon.viewValue}} </mat-option> </mat-optgroup> </mat-select> </mat-form-field>
下拉列表并不是唯一需要数据绑定的组件，还有一些组件也需要，且它们更加复杂，比如树型控件，表格控件，树型表格控件等。
数据绑定成为前端业务开发的第二个关注点。
低效的验证
验证是业务健壮性的基本保障，Angular Material表单组件提供了基本的验证方法。
<mat-form-field> <input matInput name="test" [(ngModel)]="value" required> </mat-form-field>
上面演示了设置必填项的方法，它相当简单，只要把required加到input标签上就好了。
遗憾的是，文本框虽然得到了验证，但却没有显示出任何错误提示消息。
通过添加一个mat-error标签，可以显示指定错误提示。
<mat-form-field> <input matInput #control="ngModel" name="test" [(ngModel)]="value" required> <mat-error *ngIf="control.hasError('required')"> 这是一个必填项 </mat-error> </mat-form-field>
如果组件上有两个验证条件，你需要添加两个mat-error标签。
<mat-form-field> <input matInput #control="ngModel" name="test" [(ngModel)]="value" required max="10"> <mat-error *ngIf="control.hasError('max') && !control.hasError('required')"> 最大值不能超过10 </mat-error> <mat-error *ngIf="control.hasError('required')"> 这是一个必填项 </mat-error> </mat-form-field>
注意，为了让提示消息只在特定验证条件失败时才显示，你需要在mat-error标签上进行验证状态判断。
如果现在组件包含5个验证条件，mat-error和它上面的判断条件将变得相当复杂。
另一方面，客户端脚本验证只是为了提升用户体验，用户可以绕过界面直接请求你的服务端，所以真正的验证必须在服务端完成。
这样一来，验证需要在客户端和服务端编写两次，这造成了双倍的工作量。
当需求发生变动，服务端和客户端的验证很难同步更新，维护变得更加困难。
验证成为前端业务开发的第三个关注点。
解决方案
如果开发的时候，既不用关心Html的结构，又不用关注数据怎么绑定，验证还能自动完成，甚至连标签和它上面的属性也不用记忆，这就最理想不过了，该如何实现呢？
用Angular组件包装标准组件
首先我们需要用Angular组件对标准组件进行包装，以方便功能扩展，这个自定义组件称为包装器。
- 封装Html复杂结构
我们把标准组件的Html标签包装起来，以属性的形式提供访问。
<mat-form-field> <input matInput placeholder="测试一下" [(ngModel)]="value" > <mat-hint>哈哈</mat-hint> <button mat-button *ngIf="value" matSuffix mat-icon-button (click)="value=''"> <mat-icon>close</mat-icon> </button> </mat-form-field>
把上面标签包装后变成这样。
<mat-textbox-wrapperplaceholder="测试一下" [(ngModel)]="value" hint="哈哈" showClearButton="true"></mat-textbox-wrapper>
mat-hint标签现在被转换为hint属性，通过showClearButton属性来控制是否显示清空按钮，大幅提升了组件的易用性。
- 约定前后端数据格式
不论下拉列表，还是表格，甚至树型控件这些需要数据绑定的组件，都有一定规律可循。
当你一遍又一遍的复制粘贴，仔细观察这个机械乏味的绑定过程，不难抽取出公共元素，形成前后端数据绑定的通用数据格式。
一旦抽取出前后端通用数据格式，你只需将业务数据转换为通用格式，发送到客户端就自动绑定完成。
- 将数据操作内置到包装器
如果你曾经使用过EasyUi这样的组件库，定会发现它的数据绑定功能十分强大，这是因为它把数据操作内置到了标准组件中。
基于Angular低耦合设计原则，Angular Material标准组件并不会直接请求服务端，任何数据绑定工作都需要你手工完成，不过我们可以将数据操作内置到包装器。
一旦封装完成，数据绑定变得非常简单，比如设置一个url属性即可，服务端返回约定的数据格式。
<mat-select-wrapper url="/api/test"></mat-select-wrapper>
用TagHelper封装Angular组件
Angular包装器组件，大幅简化了标准组件的使用，但它提供的依然是Html，而自定义Html标签和属性没有什么提示，这意味着你如果记不住这些API，就需要随时欣赏API文档。
TagHelper终于闪亮登场。
- 强类型代码提示和编译时检查
一旦把Html标签封装成TagHelper，就可以跟API文档拜拜了，把代码提示点出来，慢慢选，只要你知道该组件确实有这功能，哪怕印象有点模糊也没关系。
Html标签和属性的拼写错误也将与你无缘，VS大哥会为你把关，代码健壮性将大幅提升。
- Lambda表达式元数据解析
很多人已经认识到HtmlHelper或TagHelper的好处是强类型提示，不过这个认识还很肤浅。
TagHelper真正的威力来自Lambda表达式元数据解析，它提供了一个统一的抽象方式，自动设置表单组件的常规属性、验证，甚至数据绑定。
对于Angular Material表单组件，通常需要设置以下常规属性：
-
- 控件名称 name
- 占位文本 placeholder
- 双向绑定 ngModel
常规验证：
-
- 必填项验证 required
- Email验证 email
- 最小长度验证 minlength
- 最大长度验证 maxlength
- 最小值验证 min
- 最大值验证 max
- 正则验证 pattern
几乎所有表单组件都需要设置这三个常规属性，而文本框更需要进行多种验证，虽然这些操作并不复杂，但由于一个表单界面包含很多组件，每个组件都要挨个设置，既浪费时间又枯燥乏味。
如果能够自动化设置这些常规属性和验证属性，虽然从单个组件看并不起眼，但从整个项目的角度，能大幅提升生产力。
Lambda表达式元数据解析，通过读取C#属性的类型信息以及相关的特性，能够自动化设置三大常规属性，以及对文本框实施多种验证，还解决了客户端与服务端验证无法同步的难题。
一旦用上Lambda表达式，界面标签将变得干净整洁，你的关注点将迅速转移到业务上。
上面的TagHelper标签生成的结果Html如下。
<mat-textbox-wrapper name="code" placeholder="应用程序编码" requiredMessage="应用程序编码不能为空" [(model)]="model&&model.code" [maxLength]="60" [required]="true"></mat-textbox-wrapper>
for指向了ApplicationDto对象的Code属性，下面是Code属性的定义。
从Code属性定义可以解析出该组件需要设置的常规属性和验证属性。
上面演示了文本框组件，对于单选框，多选框，下拉框等表单组件，都可以使用相同的方式，一个for属性，基础工作已经完成。
封装的弊端
看了前面的解决方案，你知道经过几层高强度封装后，组件将变得简单易用，不过在将这些方法应用到你的项目之前，你需要对这些方法有更深的了解。
任何事物都有其两面性，所谓此消彼长，在组件变得更加简单易用的同时，它的灵活性也在降低。
包装器组件将Html结构封装起来，这会导致组件不再支持模板化，如果某个功能在你的包装器中未实现，那么不能通过在包装器标签内嵌套HTML的方式组合出新的功能。
封装包装器组件有相当多的讲究，特别是Angular Material这样的组件库在功能上几乎无法与EasyUi或Ext等企业级UI库相提并论，你必须在易用性和灵活性间进行平衡，对于像表格这样的重量级组件，很难封装到完全满足业务需求，这种情况下，你必须为其保留模板化能力。
另一方面，封装后的傻瓜式TagHelper，很容易把程序员惯坏，开发常用功能风升水起，一碰到超出框架范围的需求就变得束手无策，因为他们从来没有学习过原生的知识。
你团队的主力开发人员必须对原生技术有系统了解。
一旦功能超出框架范围，你必须有能力扩展框架，在必要的时候，直接使用原生Html进行开发，这时候你更能体会到TagHelper与Html混合编程的好处，既提升了常规功能的开发效率，又满足了复杂功能对操作体验的需求。
Util组件介绍
下面简要介绍Util中封装的几个常用组件，它们来自Angular Material或PrimeNg组件库。
文本框
前面已经展示过文本框的用法，除了常规属性设置和验证以外，for指向属性的数据类型会影响生成的文本框类型，比如属性为日期类型，文本框会变成一个日期选择控件。
/// <summary> /// 创建时间 /// </summary> [Display( Name = "创建时间" )] public DateTime? CreationTime { get; set; }
<util-textbox for="CreationTime"></util-textbox>
生成的Html结果如下。
<mat-datepicker-wrapper name="creationTime" placeholder="创建时间" [(model)]="model&&model.creationTime"></mat-datepicker-wrapper>
下面再演示一下数值类型，添加了最大和最小值验证，并设置前缀文本和后缀图标。 当属性为数值类型时，文本框只能输入数字。
/// <summary> /// 金额 /// </summary> [Required( ErrorMessage = "必须填写金额" )] [Range(10,50,ErrorMessage = "有效金额在10到50之间")] [Display( Name = "金额" )] public decimal Money { get; set; }
生成的Html结果如下。
<mat-textbox-wrapper type="number" name="money" placeholder="金额" [(model)]="model&&model.money" startHint="a" endHint="b" prefixText="$" suffixFontAwesomeIcon="fa-apple" [required]="true" requiredMessage="必须填写金额" [min]="10" [max]="50" minMessage="有效金额在10到50之间" maxMessage="有效金额在10到50之间"> </mat-textbox-wrapper>
来看看执行效果。
下拉列表
下拉列表的封装，重点在于数据绑定。
- 绑定枚举
下面演示如何把民族枚举绑定到下拉列表。
C#代码如下。
1 /// <summary> 2 /// 民族 3 /// </summary> 4 public enum Nation { 5 /// <summary> 6 /// 汉族 7 /// </summary> 8 [Description( "汉族" )] 9 Hz = 0, 10 /// <summary> 11 /// 蒙古族 12 /// </summary> 13 [Description( "蒙古族" )] 14 Mgz = 1, 15 /// <summary> 16 /// 回族 17 /// </summary> 18 [Description( "回族" )] 19 HuiZ = 2, 20 /// <summary> 21 /// 藏族 22 /// </summary> 23 [Description( "藏族" )] 24 Zz = 3, 25 /// <summary> 26 /// 维吾尔族 27 /// </summary> 28 [Description( "维吾尔族" )] 29 Wwez = 4, 30 /// <summary> 31 /// 苗族 32 /// </summary> 33 [Description( "苗族" )] 34 Mz = 5, 35 /// <summary> 36 /// 彝族 37 /// </summary> 38 [Description( "彝族" )] 39 Yz = 6, 40 /// <summary> 41 /// 壮族 42 /// </summary> 43 [Description( "壮族" )] 44 ZhuangZ = 7, 45 /// <summary> 46 /// 布依族 47 /// </summary> 48 [Description( "布依族" )] 49 Byz = 8, 50 /// <summary> 51 /// 朝鲜族 52 /// </summary> 53 [Description( "朝鲜族" )] 54 Cxz = 9, 55 /// <summary> 56 /// 满族 57 /// </summary> 58 [Description( "满族" )] 59 ManZ = 10, 60 /// <summary> 61 /// 侗族 62 /// </summary> 63 [Description( "侗族" )] 64 Tz = 11, 65 /// <summary> 66 /// 瑶族 67 /// </summary> 68 [Description( "瑶族" )] 69 YaoZ = 12, 70 /// <summary> 71 /// 白族 72 /// </summary> 73 [Description( "白族" )] 74 Bz = 13,//baizu 75 /// <summary> 76 /// 土家族 77 /// </summary> 78 [Description( "土家族" )] 79 Tjz = 14, 80 /// <summary> 81 /// 哈尼族 82 /// </summary> 83 [Description( "哈尼族" )] 84 Hnz = 15, 85 /// <summary> 86 /// 哈萨克族 87 /// </summary> 88 [Description( "哈萨克族" )] 89 Hskz = 16, 90 /// <summary> 91 /// 傣族 92 /// </summary> 93 [Description( "傣族" )] 94 Dz = 17, 95 /// <summary> 96 /// 黎族 97 /// </summary> 98 [Description( "黎族" )] 99 Lz = 18, 100 /// <summary> 101 /// 傈僳族 102 /// </summary> 103 [Description( "傈僳族" )] 104 Lsz = 19, 105 /// <summary> 106 /// 佤族 107 /// </summary> 108 [Description( "佤族" )] 109 Wz = 20, 110 /// <summary> 111 /// 畲族 112 /// </summary> 113 [Description( "畲族" )] 114 Sz = 21, 115 /// <summary> 116 /// 高山族 117 /// </summary> 118 [Description( "高山族" )] 119 Gsz = 22, 120 /// <summary> 121 /// 拉祜族 122 /// </summary> 123 [Description( "拉祜族" )] 124 Lhz = 23, 125 /// <summary> 126 /// 水族 127 /// </summary> 128 [Description( "水族" )] 129 ShuiZ = 24, 130 /// <summary> 131 /// 东乡族 132 /// </summary> 133 [Description( "东乡族" )] 134 Dxz = 25, 135 /// <summary> 136 /// 纳西族 137 /// </summary> 138 [Description( "纳西族" )] 139 Nxz = 26, 140 /// <summary> 141 /// 景颇族 142 /// </summary> 143 [Description( "景颇族" )] 144 Jpz = 27, 145 /// <summary> 146 /// 柯尔克孜族 147 /// </summary> 148 [Description( "柯尔克孜族" )] 149 Kekzz = 28, 150 /// <summary> 151 /// 土族 152 /// </summary> 153 [Description( "土族" )] 154 TuZ = 29, 155 /// <summary> 156 /// 达斡尔族 157 /// </summary> 158 [Description( "达斡尔族" )] 159 Dwez = 30, 160 /// <summary> 161 /// 仫佬族 162 /// </summary> 163 [Description( "仫佬族" )] 164 Mlz = 31, 165 /// <summary> 166 /// 羌族 167 /// </summary> 168 [Description( "羌族" )] 169 Qz = 32, 170 /// <summary> 171 /// 布朗族 172 /// </summary> 173 [Description( "布朗族" )] 174 Blz = 33, 175 /// <summary> 176 /// 撒拉族 177 /// </summary> 178 [Description( "撒拉族" )] 179 Slz = 34, 180 /// <summary> 181 /// 毛南族 182 /// </summary> 183 [Description( "毛南族" )] 184 Mnz = 35, 185 /// <summary> 186 /// 仡佬族 187 /// </summary> 188 [Description( "仡佬族" )] 189 Ylz = 36, 190 /// <summary> 191 /// 锡伯族 192 /// </summary> 193 [Description( "锡伯族" )] 194 Xbz = 37, 195 /// <summary> 196 /// 阿昌族 197 /// </summary> 198 [Description( "阿昌族" )] 199 Acz = 38, 200 /// <summary> 201 /// 普米族 202 /// </summary> 203 [Description( "普米族" )] 204 Pmz = 39, 205 /// <summary> 206 /// 塔吉克族 207 /// </summary> 208 [Description( "塔吉克族" )] 209 Tjkz = 40, 210 /// <summary> 211 /// 怒族 212 /// </summary> 213 [Description( "怒族" )] 214 Nz = 41, 215 /// <summary> 216 /// 乌孜别克族 217 /// </summary> 218 [Description( "乌孜别克族" )] 219 Wzbkz = 42, 220 /// <summary> 221 /// 俄罗斯族 222 /// </summary> 223 [Description( "俄罗斯族" )] 224 Elsz = 43, 225 /// <summary> 226 /// 鄂温克族 227 /// </summary> 228 [Description( "鄂温克族" )] 229 Ewkz = 44, 230 /// <summary> 231 /// 德昂族 232 /// </summary> 233 [Description( "德昂族" )] 234 Daz = 45, 235 /// <summary> 236 /// 保安族 237 /// </summary> 238 [Description( "保安族" )] 239 Baz = 46, 240 /// <summary> 241 /// 裕固族 242 /// </summary> 243 [Description( "裕固族" )] 244 Ygz = 47, 245 /// <summary> 246 /// 京族 247 /// </summary> 248 [Description( "京族" )] 249 Jz = 48, 250 /// <summary> 251 /// 塔塔尔族 252 /// </summary> 253 [Description( "塔塔尔族" )] 254 Ttrz = 49, 255 /// <summary> 256 /// 独龙族 257 /// </summary> 258 [Description( "独龙族" )] 259 Dlz = 50, 260 /// <summary> 261 /// 鄂伦春族 262 /// </summary> 263 [Description( "鄂伦春族" )] 264 Elcz = 51, 265 /// <summary> 266 /// 赫哲族 267 /// </summary> 268 [Description( "赫哲族" )] 269 Hzz = 52, 270 /// <summary> 271 /// 门巴族 272 /// </summary> 273 [Description( "门巴族" )] 274 Mbz = 53, 275 /// <summary> 276 /// 珞巴族 277 /// </summary> 278 [Description( "珞巴族" )] 279 Lbz = 54, 280 /// <summary> 281 /// 基诺族 282 /// </summary> 283 [Description( "基诺族" )] 284 Jnz = 55 285 }
/// <summary> /// 民族 /// </summary> [Required( ErrorMessage = "必须选择一个民族" )] [Display( Name = "民族" )] [DataMember] public Nation Nation { get; set; }
TagHelper代码如下。
<util-select for="Nation"></util-select>
生成的Html如下，可以看出，民族可选项被硬编码到Html标签中。
<mat-select-wrapper name="nation" placeholder="民族" requiredMessage="必须选择一个民族" [(model)]="model&&model.nation" [dataSource]="[{'text':'汉族','value':0,'sortId':0},{'text':'蒙古族','value':1,'sortId':1},{'text':'回族','value':2,'sortId':2},{'text':'藏族','value':3,'sortId':3},{'text':'维吾尔族','value':4,'sortId':4},{'text':'苗族','value':5,'sortId':5},{'text':'彝族','value':6,'sortId':6},{'text':'壮族','value':7,'sortId':7},{'text':'布依族','value':8,'sortId':8},{'text':'朝鲜族','value':9,'sortId':9},{'text':'满族','value':10,'sortId':10},{'text':'侗族','value':11,'sortId':11},{'text':'瑶族','value':12,'sortId':12},{'text':'白族','value':13,'sortId':13},{'text':'土家族','value':14,'sortId':14},{'text':'哈尼族','value':15,'sortId':15},{'text':'哈萨克族','value':16,'sortId':16},{'text':'傣族','value':17,'sortId':17},{'text':'黎族','value':18,'sortId':18},{'text':'傈僳族','value':19,'sortId':19},{'text':'佤族','value':20,'sortId':20},{'text':'畲族','value':21,'sortId':21},{'text':'高山族','value':22,'sortId':22},{'text':'拉祜族','value':23,'sortId':23},{'text':'水族','value':24,'sortId':24},{'text':'东乡族','value':25,'sortId':25},{'text':'纳西族','value':26,'sortId':26},{'text':'景颇族','value':27,'sortId':27},{'text':'柯尔克孜族','value':28,'sortId':28},{'text':'土族','value':29,'sortId':29},{'text':'达斡尔族','value':30,'sortId':30},{'text':'仫佬族','value':31,'sortId':31},{'text':'羌族','value':32,'sortId':32},{'text':'布朗族','value':33,'sortId':33},{'text':'撒拉族','value':34,'sortId':34},{'text':'毛南族','value':35,'sortId':35},{'text':'仡佬族','value':36,'sortId':36},{'text':'锡伯族','value':37,'sortId':37},{'text':'阿昌族','value':38,'sortId':38},{'text':'普米族','value':39,'sortId':39},{'text':'塔吉克族','value':40,'sortId':40},{'text':'怒族','value':41,'sortId':41},{'text':'乌孜别克族','value':42,'sortId':42},{'text':'俄罗斯族','value':43,'sortId':43},{'text':'鄂温克族','value':44,'sortId':44},{'text':'德昂族','value':45,'sortId':45},{'text':'保安族','value':46,'sortId':46},{'text':'裕固族','value':47,'sortId':47},{'text':'京族','value':48,'sortId':48},{'text':'塔塔尔族','value':49,'sortId':49},{'text':'独龙族','value':50,'sortId':50},{'text':'鄂伦春族','value':51,'sortId':51},{'text':'赫哲族','value':52,'sortId':52},{'text':'门巴族','value':53,'sortId':53},{'text':'珞巴族','value':54,'sortId':54},{'text':'基诺族','value':55,'sortId':55}]" [required]="true"> </mat-select-wrapper>
执行效果如下。
- 绑定服务端数据
为了绑定服务端数据，必须约定通用数据格式，对于下拉列表，服务端C#是由Util.Item来完成的。
1 using System; 2 using Newtonsoft.Json; 3 4 namespace Util { 5 /// <summary> 6 /// 列表项 7 /// </summary> 8 public class Item : IComparable<Item> { 9 /// <summary> 10 /// 初始化 11 /// </summary> 12 /// <param name="text">文本</param> 13 /// <param name="value">值</param> 14 /// <param name="sortId">排序号</param> 15 /// <param name="group">组</param> 16 /// <param name="disabled">禁用</param> 17 public Item( string text, object value, int? sortId = null, string group = null, bool? disabled = null ) { 18 Text = text; 19 Value = value; 20 SortId = sortId; 21 Group = group; 22 Disabled = disabled; 23 } 24 25 /// <summary> 26 /// 文本 27 /// </summary> 28 [JsonProperty( "text", NullValueHandling = NullValueHandling.Ignore )] 29 public string Text { get; } 30 31 /// <summary> 32 /// 值 33 /// </summary> 34 [JsonProperty( "value", NullValueHandling = NullValueHandling.Ignore )] 35 public object Value { get; } 36 37 /// <summary> 38 /// 排序号 39 /// </summary> 40 [JsonProperty( "sortId", NullValueHandling = NullValueHandling.Ignore )] 41 public int? SortId { get; } 42 43 /// <summary> 44 /// 组 45 /// </summary> 46 [JsonProperty( "group", NullValueHandling = NullValueHandling.Ignore )] 47 public string Group { get; } 48 49 /// <summary> 50 /// 禁用 51 /// </summary> 52 [JsonProperty( "disabled", NullValueHandling = NullValueHandling.Ignore )] 53 public bool? Disabled { get; } 54 55 /// <summary> 56 /// 比较 57 /// </summary> 58 /// <param name="other">其它列表项</param> 59 public int CompareTo( Item other ) { 60 return string.Compare( Text, other.Text, StringComparison.CurrentCulture ); 61 } 62 } 63 }
客户端Typescript定义了对应的结构。
1 //============== 列表============================= 2 //Copyright 2018 何镇汐 3 //Licensed under the MIT license 4 //================================================ 5 import { ISort, sort } from '../core/sort'; 6 import { util } from '../index'; 7 8 /** 9 * 列表 10 */ 11 export class Select { 12 /** 13 * 初始化列表 14 * @param items 列表项集合 15 */ 16 constructor(private items: SelectItem[]) { 17 } 18 19 /** 20 * 转换为下拉列表项集合 21 */ 22 toOptions(): SelectOption[] { 23 return this.getSortedItems().map(value => new SelectOption(value)); 24 } 25 26 /** 27 * 获取已排序的列表项集合 28 */ 29 private getSortedItems() { 30 return sort(this.items); 31 } 32 33 /** 34 * 转换为下拉列表组集合 35 */ 36 toGroups(): SelectOptionGroup[] { 37 let result: SelectOptionGroup[] = new Array<SelectOptionGroup>(); 38 let groups = util.helper.groupBy(this.getSortedItems(), t => t.group); 39 groups.forEach((items, key) => { 40 result.push(new SelectOptionGroup(key, items.map(item => new SelectOption(item)), false)); 41 }); 42 return result; 43 } 44 45 /** 46 * 是否列表组 47 */ 48 isGroup(): boolean { 49 return this.items.every(value => !!value.group); 50 } 51 } 52 53 /** 54 * 列表项 55 */ 56 export class SelectItem implements ISort { 57 /** 58 * 文本 59 */ 60 text: string; 61 /** 62 * 值 63 */ 64 value; 65 /** 66 * 禁用 67 */ 68 disabled?: boolean; 69 /** 70 * 排序号 71 */ 72 sortId?: number; 73 /** 74 * 组 75 */ 76 group?: string; 77 } 78 79 /** 80 * 下拉列表项 81 */ 82 export class SelectOption { 83 /** 84 * 文本 85 */ 86 text: string; 87 /** 88 * 值 89 */ 90 value; 91 /** 92 * 禁用 93 */ 94 disabled?: boolean; 95 96 /** 97 * 初始化下拉列表项 98 * @param item 列表项 99 */ 100 constructor(item: SelectItem) { 101 this.text = item.text; 102 this.value = item.value; 103 this.disabled = item.disabled; 104 } 105 } 106 107 /** 108 * 下拉列表组 109 */ 110 export class SelectOptionGroup { 111 /** 112 * 初始化下拉列表组 113 * @param text 文本 114 * @param value 值 115 * @param disabled 禁用 116 */ 117 constructor(public text: string, public value: SelectOption[], public disabled?: boolean) { 118 } 119 }
下面来演示一下用法。
先把Nation属性的类型改成int。
/// <summary> /// 民族 /// </summary> [Required( ErrorMessage = "必须选择一个民族" )] [Display( Name = "民族" )] [DataMember] public int Nation { get; set; }
在WebApi控制器中，添加一个方法，用来获取民族枚举可选项。
通过Util.Helpers.Enum.GetItems方法可以提取出枚举项列表，返回值为List<Item>，这正是我们约定的标准格式，如果返回的是业务类型列表，应转换为List<Item>。
Success方法用来将List<Item>转换为前后端约定的标准结果类型Result。
/// <summary> /// 获取民族可选项列表 /// </summary> [HttpGet( "nationItems" )] public IActionResult GetNationItems() { List<Item> items = Util.Helpers.Enum.GetItems<Util.Biz.Enums.Nation>(); return Success( items ); }
再来看TagHelper标签，for属性承包了常规的机械工作，你将注意力集中在业务上，通过手工设置url属性来加载远程数据。
<util-select for="Nation" url="/api/test/nationItems"></util-select>
效果跟直接绑定枚举一样，不过生成的Html简单很多。
<mat-select-wrapper name="nation" placeholder="民族" requiredMessage="必须选择一个民族" url="/api/application/nationItems" [(model)]="model&&model.nation" [required]="true"></mat-select-wrapper>
上面演示的下拉列表并未分组，我们来改造一下，让它以分组显示。
/// <summary> /// 获取民族可选项列表 /// </summary> [HttpGet( "nationItems" )] public IActionResult GetNationItems() { var result = Util.Helpers.Enum.GetItems<Util.Biz.Enums.Nation>() .GroupBy( t => Util.Helpers.String.PinYin( t.Text.Substring( 0,1 ) ) ) .SelectMany( t => t.ToList().Select( item => new Item( item.Text, item.Value, item.SortId, t.Key ) ) ); return Success( result ); }
Util包含大量有用的Helper，Util.Helpers.String.PinYin方法能够将汉字转换为拼音首字母缩写，使用GroupBy方法将民族拼音首字母进行分组，并转换为Item标准格式。
执行效果如下。
TagHelper没有任何变化，Angular Material下拉列表是否分组，其原生Html格式完全不同，但封装以后，你根本感觉不到它们的区别，你不需要编写任何一行Ts代码，就完成了分组下拉列表的绑定，你应该已经体会到封装的强大之处。
单选按钮
单选按钮和下拉列表类似，下面演示一下枚举绑定。
C#代码如下。
/// <summary> /// 性别 /// </summary> public enum Gender { /// <summary> /// 女 /// </summary> [Description( "女士" )] Female = 1, /// <summary> /// 男 /// </summary> [Description( "先生" )] Male = 2 }
/// <summary> /// 性别 /// </summary> [Display( Name = "性别" )] public Gender Gender { get; set; }
TagHelper标签如下。
<util-radio for="Gender"></util-radio>
生成的Html标签如下。
<mat-radio-wrapper label="性别" name="gender" [(model)]="model&&model.gender" [dataSource]="[{'text':'女士','value':1,'sortId':1},{'text':'先生','value':2,'sortId':2}]"> </mat-radio-wrapper>
执行效果如下。
复选框
复选框用于操作布尔类型。
C#代码如下。
/// <summary> /// 启用 /// </summary> [Display( Name = "启用" )] [DataMember] public bool? Enabled { get; set; }
TagHelper标签如下。
<util-checkbox for="Enabled"></util-checkbox>
生成的Html标签如下。
<mat-checkbox name="gender" [(ngModel)]="model&&model.gender">性别</mat-checkbox>
执行效果如下。
滑动开关
滑动开关与复选框功能相同，但长像更具现代化气质。
TagHelper标签如下。
<util-slide-toggle for="Enabled"></util-slide-toggle>
生成的Html标签如下。
<mat-slide-toggle name="enabled" [(ngModel)]="model&&model.enabled">启用</mat-slide-toggle>
执行效果如下。
表格
Angular Material表格提供了一套模板化机制，你需要任何功能，往表格标签中添加元素就好了。
像序号，多选，分页等常规功能都没有内置到Angular Material表格中，Angular Material官网以Demo的形式提供了参考样例，如果你直接使用它来进行业务开发，将导致十分低效的开发效率。
Util将自动生成序号，多选，分页，排序等常见功能以及数据绑定能力封装到表格包装器组件中，同时，Util保留了Angular Material表格的模板化能力，你依然可以通过往表格标签中添加元素的方式扩展功能。
由于大多表格都需要分页，约定的后台数据格式由PagerList承载，Ts也定义了类似的分页列表对象。
下面演示一个简单的表格示例。
服务端已经封装了通用的查询方法，留待下篇介绍。
先看看TagHelper代码。
1 <util-table id="tableApplication" query-param="queryParam" base-url="application" 2 sort="CreationTime" sort-direction="Desc" max-height="500"> 3 <util-table-column type="Checkbox"></util-table-column> 4 <util-table-column type="LineNumber"></util-table-column> 5 <util-table-column for="Code" sort="true"></util-table-column> 6 <util-table-column for="Name" sort="true"></util-table-column> 7 <util-table-column for="Enabled" sort="true"></util-table-column> 8 <util-table-column for="RegisterEnabled" sort="true"></util-table-column> 9 <util-table-column for="CreationTime" sort="true"></util-table-column> 10 <util-table-column title="操作" column="operation"> 11 <util-table-cell> 12 <util-a styles="Icon" tooltip="编辑" bind-link="['update',row.id]"> 13 <util-icon material-icon="Edit"></util-icon> 14 </util-a> 15 <util-button styles="Icon" menu-id="menu"> 16 <util-icon material-icon="More_Vert"></util-icon> 17 <util-menu id="menu"> 18 <util-menu-item label="删除" material-icon="Delete" on-click="delete(row.id)"></util-menu-item> 19 <util-menu-item label="查看详细" material-icon="Visibility" bind-link="['detail',row.id]"></util-menu-item> 20 </util-menu> 21 </util-button> 22 </util-table-cell> 23 </util-table-column> 24 </util-table>
生成的Html如下。
1 <mat-table-wrapper #tableApplication="" baseUrl="application" key="application" maxHeight="500" [(queryParam)]="queryParam"><mat-table matSort="" matSortActive="CreationTime" matSortDirection="desc" matSortDisableClear="" [dataSource]="tableApplication.dataSource" [style.max-height]="tableApplication.maxHeight?tableApplication.maxHeight+'px':null" [style.min-height]="tableApplication.minHeight?tableApplication.minHeight+'px':null"> 2 <ng-container matColumnDef="selectCheckbox"><mat-header-cell *matHeaderCellDef=""><mat-checkbox (change)="$event?tableApplication.masterToggle():null" [checked]="tableApplication.isMasterChecked()" [disabled]="!tableApplication.dataSource.data.length" [indeterminate]="tableApplication.isMasterIndeterminate()"></mat-checkbox></mat-header-cell><mat-cell *matCellDef="let row"><mat-checkbox (change)="$event?tableApplication.checkedSelection.toggle(row):null" (click)="$event.stopPropagation()" [checked]="tableApplication.checkedSelection.isSelected(row)"></mat-checkbox></mat-cell></ng-container> 3 <ng-container matColumnDef="lineNumber"><mat-header-cell *matHeaderCellDef="">ID</mat-header-cell><mat-cell *matCellDef="let row">{{ row.lineNumber }}</mat-cell></ng-container> 4 <ng-container matColumnDef="code"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">应用程序编码</mat-header-cell><mat-cell *matCellDef="let row">{{ row.code }}</mat-cell></ng-container> 5 <ng-container matColumnDef="name"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">应用程序名称</mat-header-cell><mat-cell *matCellDef="let row">{{ row.name }}</mat-cell></ng-container> 6 <ng-container matColumnDef="enabled"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">启用</mat-header-cell><mat-cell *matCellDef="let row"><mat-icon *ngIf="row.enabled">check</mat-icon><mat-icon *ngIf="!row.enabled">clear</mat-icon></mat-cell></ng-container> 7 <ng-container matColumnDef="registerEnabled"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">启用注册</mat-header-cell><mat-cell *matCellDef="let row"><mat-icon *ngIf="row.registerEnabled">check</mat-icon><mat-icon *ngIf="!row.registerEnabled">clear</mat-icon></mat-cell></ng-container> 8 <ng-container matColumnDef="creationTime"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">创建时间</mat-header-cell><mat-cell *matCellDef="let row">{{ row.creationTime | date:"yyyy-MM-dd" }}</mat-cell></ng-container> 9 <ng-container matColumnDef="operation"><mat-header-cell *matHeaderCellDef="">操作</mat-header-cell> 10 <mat-cell *matCellDef="let row"> 11 <a mat-icon-button="" matTooltip="编辑" [routerLink]="['update',row.id]"> 12 <mat-icon>edit</mat-icon> 13 </a> 14 <button mat-icon-button="" type="button" [matMenuTriggerFor]="menu"> 15 <mat-icon>more_vert</mat-icon> 16 <mat-menu #menu="matMenu"><ng-template matMenuContent=""> 17 <button (click)="delete(row.id)" mat-menu-item=""><mat-icon>delete</mat-icon><span>删除</span></button> 18 <button mat-menu-item="" [routerLink]="['detail',row.id]"><mat-icon>visibility</mat-icon><span>查看详细</span></button> 19 </ng-template></mat-menu> 20 </button> 21 </mat-cell> 22 </ng-container> 23 <mat-header-row *matHeaderRowDef="['selectCheckbox','lineNumber','code','name','enabled','registerEnabled','creationTime','operation'];sticky:true"></mat-header-row><mat-row (click)="tableApplication.selectedSelection.select(row)" *matRowDef="let row;columns:['selectCheckbox','lineNumber','code','name','enabled','registerEnabled','creationTime','operation']" class="mat-row-hover" [class.selected]="tableApplication.selectedSelection.isSelected(row)"></mat-row></mat-table></mat-table-wrapper>
可以看见，Html比TagHelper代码要复杂得多，这还是封装过后的情况，如果完全没有封装，折腾一个表格将会耗费你大量精力，且Bug遍地，难以维护。
Ts代码几乎看不见，你只需设置base-url属性，数据绑定就完成了。
base-url是一个基地址，根据约定创建服务端请求地址/api/baseUrl,如果你的请求地址不同，可以改为设置url属性。
执行效果如下。
树型表格
树型层次关系是业务常见操作之一。
Util Angular Material的封装主要是在Angular Material 5.x之前完成的，Angular Material 6.x才提供了树型控件，所以Util尚未封装树型控件，不过为了解决编辑树型层次困难的局面，我从PrimeNg组件库Copy了一个树型表格过来。
PrimeNg是另一个开源的Angular组件库，它的树型表格功能非常弱，我花了数天时间来修改它的源码，以满足我的基本需求。
由于树型包含同步加载，异步加载，上移，下移，单选，多选等操作，封装树型表格比普通表格要复杂得多。
服务端提供了PrimeTreeControllerBase和PrimeTreeNode等对象类型来实现与客户端通信，不过它们都还相当具体化，待后续封装Ng-Zorro树型组件时再来重构。
一旦封装完成，它用起来就跟Angular Material表格几乎没什么区别。
来看个示例。
TagHelper代码如下。
<util-tree-table id="treeTable_role" base-url="role" query-param="queryParam" selection-mode="Multiple" key="treeTable_role" > <util-tree-table-column for="Name"></util-tree-table-column> <util-tree-table-column for="Code"></util-tree-table-column> <util-tree-table-column for="Enabled"></util-tree-table-column> <util-tree-table-column for="SortId"></util-tree-table-column> <util-tree-table-column title="操作"> <util-a styles="Icon" tooltip="添加下级角色" link="create" query-params="{id:row.data.id}"> <util-icon material-icon="Add"></util-icon> </util-a> <util-button id="btnMoveUp" styles="Icon" tooltip="上移" ng-if="!isFirst(row)" on-click="moveUp(row,btnMoveUp,$event)"> <util-icon material-icon="Arrow_Upward"></util-icon> </util-button> <util-button id="btnMoveDown" styles="Icon" tooltip="下移" ng-if="!isLast(row)" on-click="moveDown(row, btnMoveDown,$event)"> <util-icon material-icon="Arrow_Downward"></util-icon> </util-button> <util-button styles="Icon" menu-id="menu" on-click="selectRow(row,$event)"> <util-icon material-icon="More_Vert"></util-icon> <util-menu id="menu"> <util-menu-item label="编辑" material-icon="Edit" bind-link="['update',row.data.id]"></util-menu-item> <util-menu-item label="禁用" material-icon="Lock" on-click="disable(row)"></util-menu-item> <util-menu-item label="启用" material-icon="Lock_Open" on-click="enable(row)"></util-menu-item> <util-menu-item label="删除" material-icon="Delete" on-click="delete(row)"></util-menu-item> <util-menu-item label="详细" material-icon="Visibility" bind-link="['detail',row.data.id]"></util-menu-item> </util-menu> </util-button> </util-tree-table-column> </util-tree-table>
生成的Html如下。
<p-tree-table #treeTable_role="" baseUrl="role" key="treeTable_role" selectionMode="checkbox" [(queryParam)]="queryParam"> <p-column field="name" header="角色名称"></p-column> <p-column field="code" header="角色编码"></p-column> <p-column field="enabled" header="启用"><ng-template let-first="first" let-i="index" let-last="last" let-row="rowData"><mat-icon *ngIf="row.data.enabled">check</mat-icon><mat-icon *ngIf="!row.data.enabled">clear</mat-icon></ng-template></p-column> <p-column field="sortId" header="排序号"></p-column> <p-column header="操作"><ng-template let-first="first" let-i="index" let-last="last" let-row="rowData"> <a mat-icon-button="" matTooltip="添加下级角色" routerLink="create" [queryParams]="{id:row.data.id}"> <mat-icon>add</mat-icon> </a> <mat-button-wrapper #btnMoveUp="" (onClick)="moveUp(row,btnMoveUp,$event)" *ngIf="!isFirst(row)" style="mat-icon-button" tooltip="上移"><ng-template> <mat-icon>arrow_upward</mat-icon> </ng-template></mat-button-wrapper> <mat-button-wrapper #btnMoveDown="" (onClick)="moveDown(row, btnMoveDown,$event)" *ngIf="!isLast(row)" style="mat-icon-button" tooltip="下移"><ng-template> <mat-icon>arrow_downward</mat-icon> </ng-template></mat-button-wrapper> <button (click)="selectRow(row,$event)" mat-icon-button="" type="button" [matMenuTriggerFor]="menu"> <mat-icon>more_vert</mat-icon> <mat-menu #menu="matMenu"><ng-template matMenuContent=""> <button mat-menu-item="" [routerLink]="['update',row.data.id]"><mat-icon>edit</mat-icon><span>编辑</span></button> <button (click)="disable(row)" mat-menu-item=""><mat-icon>lock</mat-icon><span>禁用</span></button> <button (click)="enable(row)" mat-menu-item=""><mat-icon>lock_open</mat-icon><span>启用</span></button> <button (click)="delete(row)" mat-menu-item=""><mat-icon>delete</mat-icon><span>删除</span></button> <button mat-menu-item="" [routerLink]="['detail',row.data.id]"><mat-icon>visibility</mat-icon><span>详细</span></button> </ng-template></mat-menu> </button> </ng-template></p-column> </p-tree-table>
看上去Html比TagHelper没有复杂多少，那是因为已经将功能内置到树型表格组件内部，不得不承认，有时候修改源码比在外围扩展要省很多力气。
执行效果如下。
在完成了异步加载，多选，上移，下移，搜索，删除行，刷新，分页等一系列功能后，一行Ts都没有，是否感觉到很清爽呢。
其它组件
Util还封装了颜色拾取器，菜单，侧边栏等组件，限于篇幅，就不一一介绍。
小结
本文简要介绍了Angular标准组件的封装手法，它能够大幅提升业务开发的生产力，同时也提醒你，必须系统学习原生技术，否则碰上稍微复杂点的问题就无法解决。
本文更多的是介绍封装思路，而封装思想与具体UI技术无关，一旦你了解了封装背后的动机和技巧，不论Angular还是Vue，或者Android组件，甚至小程序都可以通过封装来提升开发效率。
未完待续，C#服务端CRUD的封装将在下篇介绍。
写文需要动力，请大家多多支持，点下推荐，Github点下星星。
Util应用框架交流一群: 24791014（已满）
Util应用框架交流二群: 184097033
Util应用框架地址：https://github.com/dotnetcore/util