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

資訊專欄INFORMATION COLUMN

高級 Angular 組件模式 (5)

JouyPub / 1332人閱讀

摘要：實現(xiàn)模板引用變量是獲取某個元素組件或者指令引用的一種方式，這個引用可以在當(dāng)前的視圖模板中的任何地方使用。它們通常是以或者的語法聲明的。成果在中，我通過打印模板引用變量所指向的類的名字來演示它所代表的引用。

05 Handle Template Reference Variables with Directives 
原文: Handle Template Reference Variables with Directives

在之前的例子中，已經(jīng)出現(xiàn)多次使用template reference variable（模板引用變量）的場景，現(xiàn)在讓我們來深入研究如何通過使用模板引用變量來關(guān)聯(lián)某個具體指令的引用。

目標(biāo)

在視圖模板內(nèi)，獲取一個指令的引用。

實現(xiàn)

模板引用變量是獲取某個元素、組件或者指令引用的一種方式，這個引用可以在當(dāng)前的視圖模板中的任何地方使用。它們通常是以#baseToggle或者#myToggle="toggle"的語法聲明的。一旦聲明，在視圖模板的任何地方就可以使用它。

Note: 請注意作用域的問題，如果你使用或者是一個結(jié)構(gòu)性指令，比如*ngIf或者*ngFor，它會在這個模板上創(chuàng)建一個新的作用域，之后在其內(nèi)部聲明的模板引用變量無法在該模板作用域以外使用。

模板引用變量的解析順序通常為：

一個指令或者組件通過它自身的exportAs屬性，比如#myToggle="toggle"

聲明于以自定義標(biāo)簽存在的組件，比如

原生html元素，并且沒有任何組件綁定與它，比如

之后我們來分別看3個例子。

指令與exportAs

指令可以在它的元數(shù)據(jù)中聲明exportAs屬性，這個屬性表示它被這個模板引用變量所標(biāo)識，如下：

// toggle.directive.ts
@Directive({
  selector: "[toggle]",
  exportAs: "toggle",
})
export class ToggleDirective { ... }

之后我們可以在視圖模板中直接使用toggle來獲取指令的引用，如下：

// app.component.html


// myTemplateRefVar is the ToggleDirective
組件

對于每一個html元素，只會有一個組件與之對應(yīng)。當(dāng)一個組件綁定于一個元素時，那么聲明的模板引用變量將會被解析為當(dāng)前元素上所綁定的組件，比如：

// app.component.html

// toggleOn is the ToggleOnComponent
HTML元素

如果沒有組件與元素綁定，模板引用變量會指向當(dāng)前這個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)于如何聲明和在視圖模板中如何使用，我在這里再補充一些，如何在組件或者指令類的內(nèi)部使用。

在類內(nèi)部獲取模板引用變量所指向的引用是通過使用ViewChild裝飾器完成的，比如上述文章中的第二個例子:

@Component({
  selector: "my-app",
  template: `
    

  `,
})
export class AppComponent {
  @ViewChild("myDiv")
  myDiv: ElementRef;

  ngAfterViewInit() {
    console.log(this.myDiv);
  }
}

這里的myDiv即指向當(dāng)前模板引用變量所指向的html元素。

Note: 在類中獲取模板引用變量所指向的引用時，請格外注意你期望獲取的引用類型，在例子中，我們期望獲取html元素，因此這里的引用類型是ElementRef，如果是指令或者組件，則分別要對應(yīng)其類型的Type。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92930.html

相關(guān)文章

  • 高級 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 組件模式 (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 組件模式 (7)

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

    chadLi 評論0 收藏0

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

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

    Chiclaim 評論0 收藏0

  • 高級 Angular 組件模式 (3b)

    摘要：原文的第四篇文章中的一個重要元素在上一篇文章中沒有涉及，使用高階組件中的常用模式可以將組件中的公用邏輯分離出來。同時，因為組件的模板并不存在任何的變動，我們可以將它轉(zhuǎn)化為一個指令，這樣我們可以以更加靈活的方式來使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...

    wums 評論0 收藏0

發(fā)表評論

0條評論

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