国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

高級 Angular 組件模式 (3a)

Chiclaim / 1328人閱讀

摘要：同時，依賴注入機制是依附于組件本身存在的，并不依附于模板的層級關系，因此不會面臨問題二的困擾。對于木偶組件本身，往往作為消費者存在，這種情況下使用機制可能會達到更好的效果。

03-a Communicate Between Components Using Dependency Injection 
原文: Communicate Between Components Using Dependency Injection

當前的組件仍然存在其他的問題，比如：

我們無法在其中方式多個或者是在同一個中

如果一個作為另外一個自定義組件的內容的話，我們無法是使用@ContentChild裝飾器獲取它

目標

我們需要將這兩個問題作為新的目標：

我們可以增加多個相同類型的子組件(、、)

并且可以使這些子組件放置在任意的自定義容器的視圖模板(views)中

實現

針對第一個問題，我們使用@ContentChildren裝飾器（因為它獲取所有的子組件引用），但是它無法解決第二個問題。

為了同時解決這兩個問題，我們可以使用Angular提供的DI機制(dependency injection mechanism)。你可以將一個組件的祖先組件通過DI機制注入到子組件的構造方法中，這樣你就可以通過祖先組件的引用來訪問它們的方法和屬性。

所以，、、都可以通過DI機制來獲得最相近的組件的引用，從而共享它的開關狀態。

Note: 
這里也可以使用service來共享狀態，也許還會更便捷，但是我們可以通過DI來達到目的，我們可以在之后的章節（第十二章）來闡述service相關的內容，這部分內容會與React Context Provider的內容對應。
成果

你可以在在線代碼倉庫看到，有兩個組件如我們預期的那樣被渲染，并且有一個組件，其中有和兩個組件。

這些子組件都會監聽同一個組件的開關狀態。

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

譯者注

依賴注入是Angular中提供的很強大的功能，在angularjs中就表現出色并作為賣點。

如果仔細思考的話，我們可以發現，在這一版的實現中，對于組件的引用獲取方式，從命令式轉變為了聲明式，因為我們不再關心獲取引用的細節（比如具體使用@ContentChild還是@ContentChildren）。

同時，依賴注入機制是依附于組件本身存在的，并不依附于模板的層級關系，因此不會面臨問題二的困擾。

對于木偶組件本身，往往作為消費者存在，這種情況下使用DI機制可能會達到更好的效果。

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

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

相關文章

  • 高級 Angular 組件模式 (6)

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

    caohaoyu 評論0 收藏0

  • 高級 Angular 組件模式 (1)

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

    Corwien 評論0 收藏0

  • 高級 Angular 組件模式 (7)

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

    chadLi 評論0 收藏0

  • 高級 Angular 組件模式 (2)

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

    Taste 評論0 收藏0

  • 高級 Angular 組件模式 (5)

    摘要：實現模板引用變量是獲取某個元素組件或者指令引用的一種方式，這個引用可以在當前的視圖模板中的任何地方使用。它們通常是以或者的語法聲明的。成果在中，我通過打印模板引用變量所指向的類的名字來演示它所代表的引用。 05 Handle Template Reference Variables with Directives 原文: Handle Template Reference Variab...

    JouyPub 評論0 收藏0

發表評論

0條評論

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