資訊專欄INFORMATION COLUMN
摘要：目標(biāo)提供一些方法或指令給組件使用者，使其可以與所提供的元素交互并修改它們。這個(gè)指令擁有一個(gè)屬性并與組件共享，該屬性將決定屬性的值是還是。
07 使用 Content Directives
原文: Use Content Directives
因?yàn)楦附M件會(huì)提供所有相關(guān)的 UI 元素（比如這里的 button），所以 toggle 組件的開發(fā)者可能無法滿足組件使用者的一些附加需求，比如，在一個(gè)自定義的開關(guān)控制元素上增加 aria 屬性。
如果 toggle 組件能夠提供一些 hooks 方法或指令給組件使用者，這些 hooks 方法或指令能夠在自定義的開關(guān)元素上設(shè)置一些合理的默認(rèn)值，那將是極好的。
目標(biāo)提供一些 hooks 方法或指令給組件使用者，使其可以與所提供的 UI 元素交互并修改它們。
實(shí)現(xiàn)我們通過實(shí)現(xiàn)一個(gè) [toggler] 指令來負(fù)責(zé)向組件使用者提供的自定義元素增加 role="switch" 和 aria-pressed 屬性。這個(gè) [toggler] 指令擁有一個(gè) [on] input 屬性（并與
stackblitz演示地址
譯者注到這里已經(jīng)是第七篇了，也許你已經(jīng)發(fā)現(xiàn)，Angular 中很多開發(fā)模式或者理念，都和 Directive 脫不了干系。
Angular 中其本身推崇組件化開發(fā)，即把一切 UI 概念當(dāng)做 Component 來看待，但仔細(xì)思考的話，這其實(shí)是有前提的，即這個(gè) UI 概念一般是由一個(gè)或多個(gè) html 元素組成的，比如一個(gè)按鈕、一個(gè)表格等。但是在前端開發(fā)中，小于元素這個(gè)顆粒度的概念也是存在的，比如上文提及的 aira 屬性便是其中之一，如果也為將這些 UI 概念抽象化為一個(gè)組件，就未免殺雞用牛刀了，因此這里使用 Directive 才是最佳實(shí)踐，其官方文章本身也有描述，Directive 即為沒有模板的 Component。
從組件開發(fā)者的角度來看的話，Directive 也會(huì)作為一種相對(duì) Component 更加輕量的解決方案，因?yàn)榕c其提供封裝良好、配置靈活、功能完備（這三點(diǎn)其實(shí)很難同時(shí)滿足）的 Component，不如提供功能簡單的 Directive，而將部分其他工作交付組件使用者來完成。比如文章中所提及的，作為組件開發(fā)者，無法預(yù)先得知組件使用者會(huì)怎樣管理開關(guān)元素以及它的樣式，因此提供一些 hooks 是很有必要的，而 hooks 這個(gè)概念，一般情況下，都會(huì)是相對(duì)簡單的，比如生命周期 hook、調(diào)用過程 hook、自定義屬性 hook 等，在這里，我們通過 Directive 為自定義開關(guān)元素增加 aria 屬性來達(dá)到提供自定義屬性 hook 的目標(biāo)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98184.html
摘要：為了適應(yīng)表單校驗(yàn)的靈活性，我們使用這種模式會(huì)事半功倍，提供校驗(yàn)信息的組件僅僅聲明渲染表單錯(cuò)誤提示信息需要設(shè)計(jì)的狀態(tài)變量即可，比如等等，對(duì)于錯(cuò)誤信息的文案及樣式，統(tǒng)統(tǒng)交由錯(cuò)誤提示組件的使用者完成。 06 Use Render Props最近在React社區(qū)中引起了轟動(dòng)，但是與之類似的模式在Angular中似乎并沒有得到太多關(guān)注。我在之前寫的文章提及過，TemplateRefs就是Ang...
摘要：原文如那樣，我們將使用一個(gè)相對(duì)簡單的組件來說明這些模式。組件的職責(zé)是僅僅是管理一個(gè)簡單的布爾值狀態(tài)屬性。文件夾并且特別是，將針對(duì)庫在不同的情形下的使用做出相應(yīng)的改變。 寫在前頭 Angular到現(xiàn)在已經(jīng)到5.x的版本了，對(duì)于MVVM框架我首先接觸的是angularjs后來又轉(zhuǎn)為react，之后換了工作因項(xiàng)目技術(shù)棧的原因又轉(zhuǎn)換到之前的angularjs，在實(shí)際工作中實(shí)施了公司幾個(gè)比較重要...
摘要：同時(shí)，依賴注入機(jī)制是依附于組件本身存在的，并不依附于模板的層級(jí)關(guān)系，因此不會(huì)面臨問題二的困擾。對(duì)于木偶組件本身，往往作為消費(fèi)者存在，這種情況下使用機(jī)制可能會(huì)達(dá)到更好的效果。 03-a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components Using Dep...
摘要：相關(guān)話題裝飾器將會(huì)返回在組件標(biāo)簽包含的內(nèi)容中，第一個(gè)符合選擇器的子組件或者子指令的引用，比如。或者裝飾器是用來獲取在組件內(nèi)部模板中使用的單個(gè)或者多個(gè)組件的。 02 Write Compound Components 原文: Write Compound Components 目標(biāo) 我們需要實(shí)現(xiàn)的需求是能夠使使用者通過組件動(dòng)態(tài)的改變包含在它內(nèi)部的內(nèi)容。 實(shí)現(xiàn) 我們可以把toggle抽象...
摘要：實(shí)現(xiàn)模板引用變量是獲取某個(gè)元素組件或者指令引用的一種方式，這個(gè)引用可以在當(dāng)前的視圖模板中的任何地方使用。它們通常是以或者的語法聲明的。成果在中，我通過打印模板引用變量所指向的類的名字來演示它所代表的引用。 05 Handle Template Reference Variables with Directives 原文: Handle Template Reference Variab...
閱讀 1780·2021-10-19 13:30
閱讀 1355·2021-10-14 09:48
閱讀 1546·2021-09-22 15:17
閱讀 2019·2019-08-30 15:52
閱讀 3285·2019-08-30 11:23
閱讀 2001·2019-08-29 15:27
閱讀 902·2019-08-29 13:55
閱讀 766·2019-08-26 14:05
