不再-封装-组件

世事总不能尽如人意。

就算强如 NG-ZORRO，虽然 99% 的情况下已经足够丰富，足够强大，足够恰当，但总有 %1 的情况，你会希望它能这样、或者那样就好了。

很多项目组都有 “封装” 组件的优良传统。理由有技术层面的，也有非技术层面的。我以前也没少干这事儿。有的时候是 nz-select 变成了 my-select、nz-date-picker 变成了 my-date-picker；有的时候是它们统统变成了 my-form-edit-control。

最后，我们获得了 好处 ，也付出沉重的 代价：

• 组件使用起来更加 简单 ，但更加 不灵活；
• 组件 API 更加 通用 ，但到最后程序往往不得不学习 两套 API；
• 组件功能更加 强大 ，但与原来的组件有哪些微妙的差别又很让人 迷惑 ，到底该用哪个又总要 纠结；
• 有时候能有效 屏蔽破坏性更新 ，但慢慢就开始 阻碍进步……

怎么破？

轻量级、装饰模式、单一职责

这是软件领域最美妙的几个词儿之一，而且它们很适合用来形容 Angular 的指令。

例如，如果我们希望卡片组件能自适应页面的高度，就可以写一个名为 nsAutoHeightCard 的指令 源码 demo，将其“装饰”到 nz-card 组件上，就实现了自适应页面高度的卡片。

<nz-card nsAutoHeightCard nzTitle="自适应高度卡片"> 
  <p>Card content</p> 
</nz-card>

DRY

NG-ZORRO 作为组件库，保持组件模型的简单、直接没有问题。但我们在实际的工程实践中，需要更大程度地遵循 DRY(Don’t Repeat Yourself) 原则，以表单验证为例：

• 对于必填项等常规表单验证显示错误信息的功能，应该 统一处理 ，而不是在每个表单中将错误信息 重复一遍。
• 既然已经在 FormGroup 对象中配置了验证条件，表单组件最好能根据这些条件 自动配置 验证视觉反馈，而不用再在表单组件中 重复配置 nzRequired 和 nzHasFeedback。

我们可以通过 无脑 统一 给每个组件增加 nsAutoFeedback 和 nsErrorTip 指令 源码 1 源码 2 demo，就可以将上述那些繁琐枯燥还易错的工作全部自动完成，甚至还能自动为标签和编辑组件增加 nzFor 和 id 属性：

<nz-form-item *nsAutoFeedback>
  <nz-form-label [nzSpan]="8"> 用户名 </nz-form-label>
  <nz-form-control nsErrorTip nzSpan="16">
    <input nz-input formControlName="userText" />
  </nz-form-control>
</nz-form-item>

更多细节请参考全部源码

总结

有实力 / 从零打造 / 组件库
要不然 / 轻量装饰 / 很舒服