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

資訊專欄INFORMATION COLUMN

高級 Angular 組件模式 (2)

Taste / 1382人閱讀

摘要：相關(guān)話題裝飾器將會返回在組件標(biāo)簽包含的內(nèi)容中，第一個符合選擇器的子組件或者子指令的引用，比如?；蛘哐b飾器是用來獲取在組件內(nèi)部模板中使用的單個或者多個組件的。

02 Write Compound Components 
原文: Write Compound Components
目標(biāo)

我們需要實現(xiàn)的需求是能夠使使用者通過組件動態(tài)的改變包含在它內(nèi)部的內(nèi)容。

實現(xiàn)

我們可以把toggle抽象為一個復(fù)合組件，由三個新的組件、、構(gòu)成。

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

toggle-button: 代表開關(guān)，用來渲染父組件的開關(guān)狀態(tài)

toggle-on: 根據(jù)父組件的開關(guān)狀態(tài)，渲染當(dāng)狀態(tài)為開時的內(nèi)容

toggle-off: 根據(jù)父組件的開關(guān)狀態(tài)，渲染當(dāng)狀態(tài)為關(guān)時的內(nèi)容

組件可以實現(xiàn)@ContentChild裝飾器獲取這三個子組件的引用，從而可以根據(jù)開關(guān)狀態(tài)的變化調(diào)整它們之間的關(guān)聯(lián)邏輯。

成果

經(jīng)過這樣的調(diào)整，我們可以使用戶通過使用組件去自定義包含在它其中內(nèi)容的顯示邏輯，內(nèi)容中會有一個按鈕負(fù)責(zé)切換開關(guān)的狀態(tài)?？梢試L試在在線代碼庫中調(diào)整子組件的順序，你可以在它們中間嵌套任何的html字符串，只要這三個組件是作為的子組件存在的，一切都將正常的運行。

相關(guān)話題

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

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

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

譯者注

這里組件架構(gòu)方式是標(biāo)準(zhǔn)的Smart Component（智能組件）和Dump Component（木偶組件）組件架構(gòu)方式。

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

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

Content代表內(nèi)容，這些內(nèi)容在組件渲染時已經(jīng)存在于組件聲明標(biāo)簽的內(nèi)部，通常在組件內(nèi)部以為占位符

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

@ContentChildren和@ViewChildren同理。

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

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

相關(guān)文章

  • 高級 Angular 組件模式 (6)

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

    caohaoyu 評論0 收藏0

  • 高級 Angular 組件模式 (1)

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

    Corwien 評論0 收藏0

  • 高級 Angular 組件模式 (7)

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

    chadLi 評論0 收藏0

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

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

    Chiclaim 評論0 收藏0

  • 高級 Angular 組件模式 (3b)

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

    wums 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<