高级 Angular 组件模式 (7)

07 使用 Content Directives

原文: Use Content Directives

由于父组件会提供全部相关的 UI 元素（好比这里的 button），因此 toggle 组件的开发者可能没法知足组件使用者的一些附加需求，好比，在一个自定义的开关控制元素上增长 aria 属性。

若是 toggle 组件可以提供一些 hooks 方法或指令给组件使用者，这些 hooks 方法或指令可以在自定义的开关元素上设置一些合理的默认值，那将是极好的。

目标

提供一些 hooks 方法或指令给组件使用者，使其能够与所提供的 UI 元素交互并修改它们。

实现

咱们经过实现一个 [toggler] 指令来负责向组件使用者提供的自定义元素增长 role="switch" 和 aria-pressed 属性。这个 [toggler] 指令拥有一个 [on] input 属性（并与 <switch> 组件共享），该属性将决定 aria-pressed 属性的值是 true 仍是 false。

成果

stackblitz演示地址

译者注

到这里已是第七篇了，也许你已经发现，Angular 中不少开发模式或者理念，都和 Directive 脱不了干系。

Angular 中其自己推崇组件化开发，即把一切 UI 概念当作 Component 来看待，但仔细思考的话，这实际上是有前提的，即这个 UI 概念通常是由一个或多个 html 元素组成的，好比一个按钮、一个表格等。可是在前端开发中，小于元素这个颗粒度的概念也是存在的，好比上文说起的 aira 属性即是其中之一，若是也为将这些 UI 概念抽象化为一个组件，就未免杀鸡用牛刀了，所以这里使用 Directive 才是最佳实践，其官方文章自己也有描述，Directive 即为没有模板的 Component。

从组件开发者的角度来看的话，Directive 也会做为一种相对 Component 更加轻量的解决方案，由于与其提供封装良好、配置灵活、功能完备（这三点其实很难同时知足）的 Component，不如提供功能简单的 Directive，而将部分其余工做交付组件使用者来完成。好比文章中所说起的，做为组件开发者，没法预先得知组件使用者会怎样管理开关元素以及它的样式，所以提供一些 hooks 是颇有必要的，而 hooks 这个概念，通常状况下，都会是相对简单的，好比生命周期 hook、调用过程 hook、自定义属性 hook 等，在这里，咱们经过 Directive 为自定义开关元素增长 aria 属性来达到提供自定义属性 hook 的目标。