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

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

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

模版引用變量是個好東西，它容許Angular完成許多有用的事情。我常常稱這個功能爲「井號語法」，由於在模版中它依賴一個簡單的井號來建立對一個元素（譯者注：元素包括HTML元素和組件元素）的引用：

<input #phone placeholder="phone number">

上述的語法是如此的簡潔：它建立了一個指向input元素的引用，這個引用稍後能夠在個人模版中使用。須要注意的是，這個（引用）變量的做用域是它所定義的整個HTML模版（的範圍）（譯者注：即在定義這個引用變量的HTML模版中均可以訪問這個變量）。

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

<!-- phone指向輸入框元素 --> 
<button (click)="callPhone(phone.value)">Call</button>

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

上述是一種避免使用ngModel或其餘數據綁定的好方法，（由於）這種方法在校驗方面上不須要寫太多代碼。

在組件上也奏效嗎？

答案就是能夠奏效！假設咱們有HelloWorldComponent以下：

@Component({
  selector: 'app-hello',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `
})
export class HelloComponent {

   name = 'Angular';
}

如今按照以下代碼，咱們使用了「井號語法」獲得了組件的引用：

<app-hello #helloComp></app-hello>

它（模版引用變量）一個最好的地方就是咱們能夠獲取實際上的組件實例對象HelloWorldComponent。因此咱們能夠訪問這個組件的任何方法或屬性，即便他們（的權限）是聲明爲私有或保護的，多麼使人驚喜：

<app-hello #helloComp></app-hello>
<!-- 下面這個表達式將會顯示（文本）"Angular" -->
{{helloComp.name}}

咱們不只能夠經過這種語法來讀取一個組件的數據，並且也能修改它。

對指令也奏效嗎？

固然（能夠），不過這裏須要進一步瞭解它（模版引用變量）。大部分的指令將會被做爲（譯者注：HTML或組件標籤）的屬性來使用，這意味着咱們沒法在那裏真正應用「井號語法」，除非咱們使用相同的語法進行扭轉：

<form (ngSubmit)="onSubmit(myForm)" #myForm="ngForm">

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

如今若是你細看上面的HTML元素，你可能會想：「等一下，那裏並無ngForm指令！我沒有見過任何屬性叫ngForm的！」，你（若是）這樣想就對了。

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

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

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

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

如今咱們已經知道它是如何運做的了。咱們能夠建立定製指令，並經過一個叫exportAs的來暴露該指令。

譯者附

爲了方便你們理解模版引用變量對指令的操控，我把相關連接的核心演示代碼附在本文最後面。

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
 
@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>
    
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value); // { first: '', last: '' }
    console.log(f.valid); // false
  }
}