亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

高級(jí) Angular 組件模式 (4)

lovXin / 2964人閱讀

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

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

在同一個(gè)html元素上綁定多個(gè)指令可能會(huì)造成命名沖突。

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

目標(biāo)

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

實(shí)現(xiàn)

因?yàn)?b>toggle和withToggle指令都綁定于元素，我們將通過(guò)為它們?cè)黾右粋€(gè)label屬性來(lái)說(shuō)明問(wèn)題。

首先我們?cè)O(shè)置一個(gè)label屬性，比如：

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

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

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

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

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

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

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

成果

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

譯者注

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107463.html

相關(guān)文章

  • 高級(jí) Angular 組件模式 (6)

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

    caohaoyu 評(píng)論0 收藏0

  • 高級(jí) Angular 組件模式 (1)

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

    Corwien 評(píng)論0 收藏0

  • 高級(jí) Angular 組件模式 (7)

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

    chadLi 評(píng)論0 收藏0

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

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

    Chiclaim 評(píng)論0 收藏0

  • 高級(jí) Angular 組件模式 (2)

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

    Taste 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<