高級 Angular 組件模式 (1)

Corwien 發布于2019-08-21 18:47 / 3139人閱讀

摘要：原文如那樣，我們將使用一個相對簡單的組件來說明這些模式。組件的職責是僅僅是管理一個簡單的布爾值狀態屬性。文件夾并且特別是，將針對庫在不同的情形下的使用做出相應的改變。

寫在前頭

Angular到現在已經到5.x的版本了，對于MVVM框架我首先接觸的是angularjs后來又轉為react，之后換了工作因項目技術棧的原因又轉換到之前的angularjs，在實際工作中實施了公司幾個比較重要項目中前端的重構工作，這個過程逐步意識到，對于MVVM框架本身，在使用層面講，掌握一些通用的模式是很有必要的，尤其現在已經很流行的組件化開發。這樣我們在實際工作中就可以無縫（或者花很少的時間成本）轉化到任何的MVVM框架，并把節省下來的時間去學習新的知識。

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

01 Build a Toggle Component

原文: Build a Toggle Component

如Kent C. Dodds Advanced React Component Patterns那樣，我們將使用一個相對簡單的組件來說明這些模式。組件的職責是僅僅是管理一個簡單的布爾值狀態屬性: on。使用如此簡單的組件進行說明的目的，是因為我們可以將更多的注意力投入到相對組件本身而言較復雜的模式中。

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

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

在我們開始下一個話題02 Write Compound Components之前，可以在在線代碼倉庫看看這個組件的實現以及演示。

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

譯者注

toggle組件的實現是一個很典型的利用單向數據流作為數據源的簡單組件：

on是單向數據源，同時代表組件內部的開關狀態

toggle`是事件發射器`，以回調的方式將on``狀態的變化傳遞給父組件

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

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

高級 Angular 組件模式 (6)

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

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

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

chadLi 2019-08-23 12:15 評論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
高級 Vue 組件模式 (1)

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

lanffy 2019-08-23 12:26 評論0 收藏0
高級 Angular 組件模式 (2)

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

Taste 2019-08-21 18:47 評論0 收藏0