高級 Angular 組件模式 (4)

lovXin 發布于2019-08-26 11:44 / 2904人閱讀

摘要：命名沖突不僅存在于指令的選擇器之間，同時也會存在于指令的和屬性，當這些屬性名一樣時，并不會進行提示，它會按原本的邏輯正常工作。目標避免存在于綁定在相同元素上的多個指令上的命名沖突。

04 Avoid Namespace Clashes with Directives

原文: Avoid Namespace Clashes with Directives

提示

在同一個html元素上綁定多個指令可能會造成命名沖突。

命名沖突不僅存在于指令的選擇器之間，同時也會存在于指令的Inputs和Outputs屬性，當這些屬性名一樣時，Angular并不會進行提示，它會按原本的邏輯正常工作。這種情況有時候是我們希望看到的，有些時候卻不是。

目標

避免存在于綁定在相同元素上的多個指令上的命名沖突。

實現

因為toggle和withToggle指令都綁定于元素，我們將通過為它們增加一個label屬性來說明問題。

首先我們設置一個label屬性，比如：

這個label屬性的值會同時綁定在每個指令上，如果想要為其中的某個指令多帶帶綁定，只能通過使用prefix(前綴)來實現。

Angular官方提供的規范指南也警示了這一點，當你在使用prefix修飾指令的名稱時，也需要注意使用prefix來修飾Input和Output屬性的名稱。

Note: 當使用Output屬性重寫原生DOM元素的事件和使用Input屬性重寫原生元素的屬性時，請額外注意，沒有任何方式可以獲知別人在他們編寫的應用或者庫中使用的命名，但是你可以很輕易的知道的具體命名的大體規則是什么，并且不要重寫它們，除非你有意為之。

增加prefix的一種方式是在每個指令的label屬性的裝飾器內增加一個字符串參數，如下：

// In withToggle.directive.ts
@Input("withToggleLabel") label;

// In toggle.directive.ts
@Input("toggleLabel") label;

但是這種解決方案的前提時，你至少能夠更改存在命名沖突中的一個或多個指令的源碼。如果在兩個第三方庫中存在命名沖突，這種情況是最棘手的，我們不在這里討論它們。

成果

在線代碼演示（自備梯子）: https://stackblitz.com/edit/adv-ng-patterns-04-namespace-clashes

譯者注

原文中關于最后一段提出的關于在多個第三方庫中存在的命名沖突的場景，作者提供做出具體的解決方案，我在這里簡單分享一下自己對于這種情況的解決方案：

通常這種情況比較少見，但是萬一存在這種情況，我們可以通過創建一個新的wrapper指令來封裝第三方指令，wrapper指令提供與第三方指令一樣的接口屬性，但是因為我們對于wrapper指令有絕對的控制權，我們可以提供統一的prefix來修飾這些接口屬性，從而達到解決沖突的效果。

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107463.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 組件模式 (2)

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

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