高級 Angular 組件模式 (7)

chadLi 發布于2019-08-23 12:15 / 2445人閱讀

摘要：目標提供一些方法或指令給組件使用者，使其可以與所提供的元素交互并修改它們。這個指令擁有一個屬性并與組件共享，該屬性將決定屬性的值是還是。

07 使用 Content Directives

原文: Use Content Directives

因為父組件會提供所有相關的 UI 元素（比如這里的 button），所以 toggle 組件的開發者可能無法滿足組件使用者的一些附加需求，比如，在一個自定義的開關控制元素上增加 aria 屬性。

如果 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 的目標。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98184.html

高級 Angular 組件模式 (6)

摘要：為了適應表單校驗的靈活性，我們使用這種模式會事半功倍，提供校驗信息的組件僅僅聲明渲染表單錯誤提示信息需要設計的狀態變量即可，比如等等，對于錯誤信息的文案及樣式，統統交由錯誤提示組件的使用者完成。 06 Use Render Props最近在React社區中引起了轟動，但是與之類似的模式在Angular中似乎并沒有得到太多關注。我在之前寫的文章提及過，TemplateRefs就是Ang...

caohaoyu 2019-08-26 11:55 評論0 收藏0
高級 Angular 組件模式 (1)

摘要：原文如那樣，我們將使用一個相對簡單的組件來說明這些模式。組件的職責是僅僅是管理一個簡單的布爾值狀態屬性。文件夾并且特別是，將針對庫在不同的情形下的使用做出相應的改變。寫在前頭 Angular到現在已經到5.x的版本了，對于MVVM框架我首先接觸的是angularjs后來又轉為react，之后換了工作因項目技術棧的原因又轉換到之前的angularjs，在實際工作中實施了公司幾個比較重要...

Corwien 2019-08-21 18:47 評論0 收藏0
高級 Angular 組件模式 (3a)

摘要：同時，依賴注入機制是依附于組件本身存在的，并不依附于模板的層級關系，因此不會面臨問題二的困擾。對于木偶組件本身，往往作為消費者存在，這種情況下使用機制可能會達到更好的效果。 03-a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components Using Dep...

Chiclaim 2019-08-21 18:47 評論0 收藏0
高級 Angular 組件模式 (2)

摘要：相關話題裝飾器將會返回在組件標簽包含的內容中，第一個符合選擇器的子組件或者子指令的引用，比如?；蛘哐b飾器是用來獲取在組件內部模板中使用的單個或者多個組件的。 02 Write Compound Components 原文: Write Compound Components 目標我們需要實現的需求是能夠使使用者通過組件動態的改變包含在它內部的內容。實現我們可以把toggle抽象...

Taste 2019-08-21 18:47 評論0 收藏0
高級 Angular 組件模式 (5)

摘要：實現模板引用變量是獲取某個元素組件或者指令引用的一種方式，這個引用可以在當前的視圖模板中的任何地方使用。它們通常是以或者的語法聲明的。成果在中，我通過打印模板引用變量所指向的類的名字來演示它所代表的引用。 05 Handle Template Reference Variables with Directives 原文: Handle Template Reference Variab...

JouyPub 2019-08-22 14:51 評論0 收藏0