高階 Angular 元件模式 7

原文:

use content directives

如果 toggle 元件能夠提供一些 hooks 方法或指令給元件使用者，這些 hooks 方法或指令能夠在自定義的開關元素上設定一些合理的預設值，那將是極好的。

提供一些 hooks 方法或指令給元件使用者，使其可以與所提供的 ui 元素互動並修改它們。

我們通過實現乙個[toggler]指令來負責向元件使用者提供的自定義元素增加role="switch"和aria-pressed屬性。這個[toggler]指令擁有乙個[on]input 屬性（並與元件共享），該屬性將決定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 的目標。

高階 Angular 元件模式 5

原文 handle template reference variables with directives在之前的例子中，已經出現多次使用template reference variable 模板引用變數 的場景，現在讓我們來深入研究如何通過使用模板引用變數來關聯某個具體指令的引用。在檢視模板內...

Angular元件 中間人模式

設計乙個元件時，元件應該是內聚的，應該不依賴外部已經存在的元件，要實現這種松耦合的元件要使用中間人模式。該元件樹中除了元件1以外，每個元件都有乙個父元件可以扮演中間人的角色。頂級的中間人是元件1，它可以使元件2，元件3，元件6之間互相通訊。依次類推，元件2是元件4和元件5的中間人。元件3是元件7和元...

Angular元件封裝

前言 在專案中我們常看到乙個頁面裡的 在很多頁面裡面用到，我們會把它封裝成乙個元件供多個頁面引用我們在頁面看到類似於下圖的標籤，就是引用的封裝好的元件 changepage event editbutton btnedit addopen addopen event,addmodal editdat...