高級 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 的目標。