成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

高級(jí) Angular 組件模式 (1)

Corwien / 3147人閱讀

摘要：原文如那樣，我們將使用一個(gè)相對(duì)簡(jiǎn)單的組件來說明這些模式。組件的職責(zé)是僅僅是管理一個(gè)簡(jiǎn)單的布爾值狀態(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è)比較重要項(xiàng)目中前端的重構(gòu)工作，這個(gè)過程逐步意識(shí)到，對(duì)于MVVM框架本身，在使用層面講，掌握一些通用的模式是很有必要的，尤其現(xiàn)在已經(jīng)很流行的組件化開發(fā)。這樣我們?cè)趯?shí)際工作中就可以無縫（或者花很少的時(shí)間成本）轉(zhuǎn)化到任何的MVVM框架，并把節(jié)省下來的時(shí)間去學(xué)習(xí)新的知識(shí)。

最近一直在關(guān)注Angular In Depth的博客，偶爾看到這個(gè)系列的文章，覺的質(zhì)量還挺高，所以抽空余時(shí)間翻譯并分享給大家，并在每個(gè)文章后面加了一點(diǎn)自己的拙見，希望可以達(dá)到拋磚引玉的效果，如果觀點(diǎn)有誤，還望各位看官輕噴。

01 Build a Toggle Component 
原文: Build a Toggle Component

如Kent C. Dodds Advanced React Component Patterns那樣，我們將使用一個(gè)相對(duì)簡(jiǎn)單的組件來說明這些模式。組件的職責(zé)是僅僅是管理一個(gè)簡(jiǎn)單的布爾值狀態(tài)屬性: on。使用如此簡(jiǎn)單的組件進(jìn)行說明的目的，是因?yàn)槲覀兛梢詫⒏嗟淖⒁饬ν度氲较鄬?duì)組件本身而言較復(fù)雜的模式中。

經(jīng)過這一系列文章，我將提供包含完整功能的、可運(yùn)行的演示代碼鏈接。你僅僅需要將注意力集中到app文件夾和toggle文件夾。toggle文件夾包含一些可復(fù)用的庫（一系列組件），當(dāng)然這個(gè)庫會(huì)隨著文章的深入而改變。app文件夾并且特別是app.component.html，將針對(duì)庫在不同的情形下的使用做出相應(yīng)的改變。

我們將從最原始的toggle組件版本開始。它僅僅有一個(gè)使用了@Input()裝飾器的on屬性，這個(gè)屬性所控制的狀態(tài)代表組件本身的開關(guān)狀態(tài)，同時(shí)它還有一個(gè)是使用了@Output()裝飾器的toggle事件發(fā)射器，這個(gè)事件發(fā)射器會(huì)在組件開關(guān)狀態(tài)改變的情況下，通知父組件。

在我們開始下一個(gè)話題02 Write Compound Components之前，可以在在線代碼倉庫看看這個(gè)組件的實(shí)現(xiàn)以及演示。

在線代碼演示（自備梯子）：https://stackblitz.com/edit/a...

譯者注

toggle組件的實(shí)現(xiàn)是一個(gè)很典型的利用單向數(shù)據(jù)流作為數(shù)據(jù)源的簡(jiǎn)單組件：

on是單向數(shù)據(jù)源，同時(shí)代表組件內(nèi)部的開關(guān)狀態(tài)

toggle`是事件發(fā)射器`，以回調(diào)的方式將on``狀態(tài)的變化傳遞給父組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90810.html

相關(guān)文章

  • 高級(jí) Angular 組件模式 (6)

    摘要：為了適應(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...

    caohaoyu 評(píng)論0 收藏0

  • 高級(jí) Angular 組件模式 (7)

    摘要：目標(biāo)提供一些方法或指令給組件使用者，使其可以與所提供的元素交互并修改它們。這個(gè)指令擁有一個(gè)屬性并與組件共享，該屬性將決定屬性的值是還是。 07 使用 Content Directives 原文: Use Content Directives 因?yàn)楦附M件會(huì)提供所有相關(guān)的 UI 元素（比如這里的 button），所以 toggle 組件的開發(fā)者可能無法滿足組件使用者的一些附加需求，比如，...

    chadLi 評(píng)論0 收藏0

  • 高級(jí) Angular 組件模式 (3a)

    摘要：同時(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...

    Chiclaim 評(píng)論0 收藏0

  • 高級(jí) Vue 組件模式 (1)

    摘要：寫在前頭去年，曾經(jīng)閱讀過一系列關(guān)于高級(jí)組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí)組件模式的文章，碰巧最近接手了一個(gè)公司項(xiàng)目，前端這塊的技術(shù)棧是。同時(shí)這個(gè)組件還擁有一個(gè)屬性，用來初始化的狀態(tài)值。 寫在前頭 去年，曾經(jīng)閱讀過一系列關(guān)于高級(jí) react 組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí) angular 組件模式的文章，碰巧最近接手了一個(gè)公...

    lanffy 評(píng)論0 收藏0

  • 高級(jí) Angular 組件模式 (2)

    摘要：相關(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抽象...

    Taste 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<