摘要:實(shí)現(xiàn)模板引用變量是獲取某個(gè)元素組件或者指令引用的一種方式,這個(gè)引用可以在當(dāng)前的視圖模板中的任何地方使用。它們通常是以或者的語(yǔ)法聲明的。成果在中,我通過打印模板引用變量所指向的類的名字來演示它所代表的引用。
05 Handle Template Reference Variables with Directives
原文: Handle Template Reference Variables with Directives
在之前的例子中,已經(jīng)出現(xiàn)多次使用template reference variable(模板引用變量)的場(chǎng)景,現(xiàn)在讓我們來深入研究如何通過使用模板引用變量來關(guān)聯(lián)某個(gè)具體指令的引用。
目標(biāo)在視圖模板內(nèi),獲取一個(gè)指令的引用。
實(shí)現(xiàn)模板引用變量是獲取某個(gè)元素、組件或者指令引用的一種方式,這個(gè)引用可以在當(dāng)前的視圖模板中的任何地方使用。它們通常是以#baseToggle或者#myToggle="toggle"的語(yǔ)法聲明的。一旦聲明,在視圖模板的任何地方就可以使用它。
Note: 請(qǐng)注意作用域的問題,如果你使用
模板引用變量的解析順序通常為:
一個(gè)指令或者組件通過它自身的exportAs屬性,比如#myToggle="toggle"
聲明于以自定義標(biāo)簽存在的組件,比如
原生html元素,并且沒有任何組件綁定與它,比如
之后我們來分別看3個(gè)例子。
指令與exportAs指令可以在它的元數(shù)據(jù)中聲明exportAs屬性,這個(gè)屬性表示它被這個(gè)模板引用變量所標(biāo)識(shí),如下:
// toggle.directive.ts @Directive({ selector: "[toggle]", exportAs: "toggle", }) export class ToggleDirective { ... }
之后我們可以在視圖模板中直接使用toggle來獲取指令的引用,如下:
// app.component.html // myTemplateRefVar is the ToggleDirective組件
對(duì)于每一個(gè)html元素,只會(huì)有一個(gè)組件與之對(duì)應(yīng)。當(dāng)一個(gè)組件綁定于一個(gè)元素時(shí),那么聲明的模板引用變量將會(huì)被解析為當(dāng)前元素上所綁定的組件,比如:
// app.component.htmlHTML元素// toggleOn is the ToggleOnComponent
如果沒有組件與元素綁定,模板引用變量會(huì)指向當(dāng)前這個(gè)html元素。
// app.component.html // someDiv is an HTMLDivElement成果
Note: 在stackblitz中,我通過打印模板引用變量所指向的類的名字(constructor.name)來演示它所代表的引用。
在線代碼演示(自備梯子): https://stackblitz.com/edit/adv-ng-patterns-05-template-ref-variables
這篇文章作者關(guān)于模板引用變量,僅僅介紹了關(guān)于如何聲明和在視圖模板中如何使用,我在這里再補(bǔ)充一些,如何在組件或者指令類的內(nèi)部使用。
在類內(nèi)部獲取模板引用變量所指向的引用是通過使用ViewChild裝飾器完成的,比如上述文章中的第二個(gè)例子:
@Component({ selector: "my-app", template: ` `, }) export class AppComponent { @ViewChild("myDiv") myDiv: ElementRef; ngAfterViewInit() { console.log(this.myDiv); } }
這里的myDiv即指向當(dāng)前模板引用變量所指向的html元素。
Note: 在類中獲取模板引用變量所指向的引用時(shí),請(qǐng)格外注意你期望獲取的引用類型,在例子中,我們期望獲取html元素,因此這里的引用類型是ElementRef,如果是指令或者組件,則分別要對(duì)應(yīng)其類型的Type。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92930.html
摘要:原文如那樣,我們將使用一個(gè)相對(duì)簡(jiǎn)單的組件來說明這些模式。組件的職責(zé)是僅僅是管理一個(gè)簡(jiǎn)單的布爾值狀態(tài)屬性。文件夾并且特別是,將針對(duì)庫(kù)在不同的情形下的使用做出相應(yīng)的改變。 寫在前頭 Angular到現(xiàn)在已經(jīng)到5.x的版本了,對(duì)于MVVM框架我首先接觸的是angularjs后來又轉(zhuǎn)為react,之后換了工作因項(xiàng)目技術(shù)棧的原因又轉(zhuǎn)換到之前的angularjs,在實(shí)際工作中實(shí)施了公司幾個(gè)比較重要...
摘要:為了適應(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),但是與之類似的模式在Angular中似乎并沒有得到太多關(guān)注。我在之前寫的文章提及過,TemplateRefs就是Ang...
摘要:目標(biāo)提供一些方法或指令給組件使用者,使其可以與所提供的元素交互并修改它們。這個(gè)指令擁有一個(gè)屬性并與組件共享,該屬性將決定屬性的值是還是。 07 使用 Content Directives 原文: Use Content Directives 因?yàn)楦附M件會(huì)提供所有相關(guān)的 UI 元素(比如這里的 button),所以 toggle 組件的開發(fā)者可能無法滿足組件使用者的一些附加需求,比如,...
摘要:同時(shí),依賴注入機(jī)制是依附于組件本身存在的,并不依附于模板的層級(jí)關(guān)系,因此不會(huì)面臨問題二的困擾。對(duì)于木偶組件本身,往往作為消費(fèi)者存在,這種情況下使用機(jī)制可能會(huì)達(dá)到更好的效果。 03-a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components Using Dep...
摘要:原文的第四篇文章中的一個(gè)重要元素在上一篇文章中沒有涉及,使用高階組件中的常用模式可以將組件中的公用邏輯分離出來。同時(shí),因?yàn)榻M件的模板并不存在任何的變動(dòng),我們可以將它轉(zhuǎn)化為一個(gè)指令,這樣我們可以以更加靈活的方式來使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...
閱讀 1377·2021-10-08 10:04
閱讀 2681·2021-09-22 15:23
閱讀 2724·2021-09-04 16:40
閱讀 1172·2019-08-29 17:29
閱讀 1492·2019-08-29 17:28
閱讀 2988·2019-08-29 14:02
閱讀 2220·2019-08-29 13:18
閱讀 838·2019-08-23 18:35