高級 Angular 組件模式 (2)

Taste 發布于2019-08-21 18:47 / 1363人閱讀

摘要：相關話題裝飾器將會返回在組件標簽包含的內容中，第一個符合選擇器的子組件或者子指令的引用，比如。或者裝飾器是用來獲取在組件內部模板中使用的單個或者多個組件的。

02 Write Compound Components

原文: Write Compound Components

目標

我們需要實現的需求是能夠使使用者通過組件動態的改變包含在它內部的內容。

實現

我們可以把toggle抽象為一個復合組件，由三個新的組件、、構成。

每一個組件的職能與它們的父組件保持一致，它們各自的職能如下：

toggle-button: 代表開關，用來渲染父組件的開關狀態

toggle-on: 根據父組件的開關狀態，渲染當狀態為開時的內容

toggle-off: 根據父組件的開關狀態，渲染當狀態為關時的內容

組件可以實現@ContentChild裝飾器獲取這三個子組件的引用，從而可以根據開關狀態的變化調整它們之間的關聯邏輯。

成果

經過這樣的調整，我們可以使用戶通過使用組件去自定義包含在它其中內容的顯示邏輯，內容中會有一個按鈕負責切換開關的狀態。可以嘗試在在線代碼庫中調整子組件的順序，你可以在它們中間嵌套任何的html字符串，只要這三個組件是作為的子組件存在的，一切都將正常的運行。

相關話題

@ContentChild裝飾器將會返回在組件標簽包含的內容中，第一個符合選擇器的子組件或者子指令的引用，比如 This is the content 。如果想獲取所有的子組件或者子指令，使用@ContentChildren。

@ViewChild或者@ViewChildren裝飾器是用來獲取在組件內部模板中使用的單個或者多個組件的。比如template: "This is the view"或者templateUrl: "./my.component.html"

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

譯者注

這里組件架構方式是標準的Smart Component（智能組件）和Dump Component（木偶組件）組件架構方式。

以上的需求完全是可以在內部實現的，但是這樣會使它的內部充滿邏輯代碼，反之我們可以將一些職能劃分為成更小的碎片，并委托到它的子組件中，本身作為容器組件存在，負責協作子組件從而達到目的。

對于@ContentChild和@ViewChild的使用場景，我認為通過看裝飾器前綴的寓意是最后的方式。

Content代表內容，這些內容在組件渲染時已經存在于組件聲明標簽的內部，通常在組件內部以為占位符

View代表視圖，視圖代表組件本身的模板，代表組件本身的渲染邏輯

@ContentChildren和@ViewChildren同理。

GPU云服務器云服務器 javascript高級程序設計第2版 Angular cdn angular angular cdn

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90809.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 組件模式 (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
高級 Angular 組件模式 (3b)

摘要：原文的第四篇文章中的一個重要元素在上一篇文章中沒有涉及，使用高階組件中的常用模式可以將組件中的公用邏輯分離出來。同時，因為組件的模板并不存在任何的變動，我們可以將它轉化為一個指令，這樣我們可以以更加靈活的方式來使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...

wums 2019-08-21 18:46 評論0 收藏0