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

資訊專欄INFORMATION COLUMN

【教程】（Angular）模版引用變量的魔法

1treeS / 776人閱讀

摘要：翻譯教程模版引用變量的魔法原文鏈接作者譯者而井模版引用變量是個(gè)好東西，它允許完成許多有用的事情。所以變量持有了相應(yīng)實(shí)例對(duì)象的任何屬性和方法，如等。它告訴嘿，如果有人想用模版引用變量來指向這個(gè)指令，那么指令的名字就叫做。

【翻譯】【教程】模版引用變量的魔法

原文鏈接：https://blog.angulartraining....  
作者：Alain Chautard
譯者：而井

模版引用變量是個(gè)好東西，它允許Angular完成許多有用的事情。我經(jīng)常稱這個(gè)功能為“井號(hào)語法”，因?yàn)樵谀０嬷兴蕾囈粋€(gè)簡(jiǎn)單的井號(hào)來創(chuàng)建對(duì)一個(gè)元素（譯者注：元素包括HTML元素和組件元素）的引用：

上述的語法是如此的簡(jiǎn)潔：它創(chuàng)建了一個(gè)指向input元素的引用，這個(gè)引用稍后可以在我的模版中使用。需要注意的是，這個(gè)（引用）變量的作用域是它所定義的整個(gè)HTML模版（的范圍）（譯者注：即在定義這個(gè)引用變量的HTML模版中都可以訪問這個(gè)變量）。

例如，這里就是我如何用這個(gè)引用來獲取輸入框的值（的例子）：

注意那個(gè)phone（變量）指向了input的HTMLElement對(duì)象實(shí)例。所以phone（變量）持有了（相應(yīng)）HTMLElement（實(shí)例對(duì)象）的任何屬性和方法，如id、name、innerHTML、value等。

上述是一種避免使用ngModel或其他數(shù)據(jù)綁定的好方法，（因?yàn)椋┻@種方法在校驗(yàn)方面上不需要寫太多代碼。

在組件上也奏效嗎？

答案就是可以奏效！假設(shè)我們有HelloWorldComponent如下：

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

      
Hello {{name}}

    

  `
})
export class HelloComponent {

   name = "Angular";
}

現(xiàn)在按照如下代碼，我們使用了“井號(hào)語法”得到了組件的引用：

它（模版引用變量）一個(gè)最好的地方就是我們可以獲取實(shí)際上的組件實(shí)例對(duì)象HelloWorldComponent。所以我們可以訪問這個(gè)組件的任何方法或?qū)傩?，即使他們（的?quán)限）是聲明為私有或保護(hù)的，多么令人驚喜：



{{helloComp.name}}

我們不僅可以通過這種語法來讀取一個(gè)組件的數(shù)據(jù)，而且也能修改它。

對(duì)指令也奏效嗎？

當(dāng)然（可以），不過這里需要進(jìn)一步了解它（模版引用變量）。大部分的指令將會(huì)被作為（譯者注：HTML或組件標(biāo)簽）的屬性來使用，這意味著我們無法在那里真正應(yīng)用“井號(hào)語法”，除非我們使用相同的語法進(jìn)行扭轉(zhuǎn)：

在上面的例子里，myForm是一個(gè)指向（應(yīng)用于表單的）ngForm指令的引用。

現(xiàn)在如果你細(xì)看上面的HTML元素，你可能會(huì)想：“等一下，那里并沒有ngForm指令！我沒有見過任何屬性叫ngForm的！”，你（如果）這樣想就對(duì)了。

答案就在ngForm指令的源代碼中：

@Directive({
  selector: "form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]",
  ...
  exportAs: "ngForm"
})

看到那個(gè)指令的選擇器的了沒？它（指令）將應(yīng)用于任何沒有ngNoForm和formGroup屬性的form表單元素之上。因此，ngForm指令將自動(dòng)應(yīng)用于我的form元素之上。

第二個(gè)被注意到的趣事就是裝飾器中的exportAs屬性。它告訴Angular：“嘿，如果有人想用模版引用變量來指向這個(gè)指令，（那么指令的）名字就叫做ngForm”。

現(xiàn)在我們已經(jīng)知道它是如何運(yùn)作的了。我們可以創(chuàng)建定制指令，并通過一個(gè)叫exportAs的來暴露該指令。

譯者附

為了方便大家理解模版引用變量對(duì)指令的操控，我把相關(guān)鏈接的核心演示代碼附在本文最后面。

import {Component} from "@angular/core";
import {NgForm} from "@angular/forms";
 
@Component({
  selector: "example-app",
  template: `
    
      
      
      
    
    
    
First name value: {{ first.value }}

    
First name valid: {{ first.valid }}

    
Form value: {{ f.value | json }}

    
Form valid: {{ f.valid }}

  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value); // { first: "", last: "" }
    console.log(f.valid); // false
  }
}

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

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

相關(guān)文章

  • 理解Angular2中的ViewContainerRef

    摘要：注意本文不是關(guān)于如何用編程的方式來創(chuàng)建組件的文章。在這個(gè)例子中，容器元素就是元素，模版將作為這個(gè)元素的兄弟節(jié)點(diǎn)被插入。用來演示以組件自身作為視圖容器，將組件中的模版插入視圖容器的效果。 原文鏈接：https://netbasal.com/angular-...作者：Netanel Basal譯者：而井 showImg(https://segmentfault.com/img/bVbl...

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

  • Ionic2入坑基礎(chǔ)教程和安裝指南

    摘要：安裝程序主要通過命令行工具來創(chuàng)建和開發(fā)，并使用來構(gòu)建和部署為原生應(yīng)用程序?；A(chǔ)教程確保完成之前的安裝并測(cè)試啟動(dòng)成功。 安裝Ionic Ionic 2 程序主要通過Ionic命令行工具CLI來創(chuàng)建和開發(fā)，并使用Cordova來構(gòu)建和部署為原生應(yīng)用程序。也就是說我們需要先安裝一些工具來實(shí)現(xiàn)程序開發(fā)。 安裝Ionic CLI 和 Cordova 要?jiǎng)?chuàng)建 Ionic 2 項(xiàng)目，你需要安裝最新版...

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

  • Angular 4 簡(jiǎn)單入門筆記

    摘要：首先，我們需要在入口頁(yè)面的中配置根路徑然后創(chuàng)建一個(gè)路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁(yè)面中需要一個(gè)容器去承載上面代碼中的定義了用戶點(diǎn)擊后的路由跳轉(zhuǎn)，定義該路由激活時(shí)的樣式類。 剛實(shí)習(xí)的時(shí)候用過AngularJS，那時(shí)候真的是連原生JavaScript都不會(huì)寫，依樣畫葫蘆做了幾個(gè)管理后臺(tái)。然后突然換項(xiàng)目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

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

  • Angular學(xué)習(xí)隨筆

    摘要：最近在看，隨手記的一些的隨筆。新上手或者準(zhǔn)備學(xué)的可以用作參考，第一次寫博客，筆記不算完整，若老司機(jī)發(fā)現(xiàn)有不足指出請(qǐng)指出。處理當(dāng)前路由離開的情況。在路由激活之前獲取路由數(shù)據(jù)。 最近在看angular4，隨手記的一些angular的隨筆。 新上手或者準(zhǔn)備學(xué)angular的可以用作參考，第一次寫博客，筆記不算完整，若老司機(jī)發(fā)現(xiàn)有不足指出請(qǐng)指出。 技術(shù)交流群：513590751 Angular...

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

  • Angular學(xué)習(xí)隨筆

    摘要：最近在看，隨手記的一些的隨筆。新上手或者準(zhǔn)備學(xué)的可以用作參考，第一次寫博客，筆記不算完整，若老司機(jī)發(fā)現(xiàn)有不足指出請(qǐng)指出。處理當(dāng)前路由離開的情況。在路由激活之前獲取路由數(shù)據(jù)。 最近在看angular4，隨手記的一些angular的隨筆。 新上手或者準(zhǔn)備學(xué)angular的可以用作參考，第一次寫博客，筆記不算完整，若老司機(jī)發(fā)現(xiàn)有不足指出請(qǐng)指出。 技術(shù)交流群：513590751 Angular...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<