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

資訊專欄INFORMATION COLUMN

高級 Angular 組件模式 (4)

lovXin / 2915人閱讀

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

04 Avoid Namespace Clashes with Directives 
原文: Avoid Namespace Clashes with Directives
提示

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

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

目標(biāo)

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

實現(xiàn)

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

首先我們設(shè)置一個label屬性，比如：

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

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

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

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

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

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

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

成果

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

譯者注

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107463.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)

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

    Chiclaim 評論0 收藏0

  • 高級 Angular 組件模式 (2)

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

    Taste 評論0 收藏0

發(fā)表評論

0條評論

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