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

1treeS 發(fā)布于2019-08-23 14:16 / 738人閱讀

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

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

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

模版引用變量是個好東西，它允許Angular完成許多有用的事情。我經(jīng)常稱這個功能為“井號語法”，因為在模版中它依賴一個簡單的井號來創(chuàng)建對一個元素（譯者注：元素包括HTML元素和組件元素）的引用：

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

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

注意那個phone（變量）指向了input的HTMLElement對象實例。所以phone（變量）持有了（相應）HTMLElement（實例對象）的任何屬性和方法，如id、name、innerHTML、value等。

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

在組件上也奏效嗎？

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

@Component({
  selector: "app-hello",
  template: `
    
      Hello {{name}}
    
  `
})
export class HelloComponent {

   name = "Angular";
}

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

它（模版引用變量）一個最好的地方就是我們可以獲取實際上的組件實例對象HelloWorldComponent。所以我們可以訪問這個組件的任何方法或屬性，即使他們（的權限）是聲明為私有或保護的，多么令人驚喜：



{{helloComp.name}}

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

對指令也奏效嗎？

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

在上面的例子里，myForm是一個指向（應用于表單的）ngForm指令的引用。

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

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

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

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

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

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

譯者附

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

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
  }
}

GPU云服務器云服務器引用類型的變量 php的變量引用 php中的變量引用模版變量

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100378.html

理解Angular2中的ViewContainerRef

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

Codeing_ls 2019-08-26 13:27 評論0 收藏0
Ionic2入坑基礎教程和安裝指南

摘要：安裝程序主要通過命令行工具來創(chuàng)建和開發(fā)，并使用來構建和部署為原生應用程序。基礎教程確保完成之前的安裝并測試啟動成功。安裝Ionic Ionic 2 程序主要通過Ionic命令行工具CLI來創(chuàng)建和開發(fā)，并使用Cordova來構建和部署為原生應用程序。也就是說我們需要先安裝一些工具來實現(xiàn)程序開發(fā)。安裝Ionic CLI 和 Cordova 要創(chuàng)建 Ionic 2 項目，你需要安裝最新版...

jayce 2019-08-21 14:35 評論0 收藏0
Angular 4 簡單入門筆記

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

whlong 2019-08-20 17:44 評論0 收藏0
Angular學習隨筆

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

jindong 2019-08-20 16:50 評論0 收藏0
Angular學習隨筆

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

Batkid 2019-08-20 16:50 評論0 收藏0