【教程】（Angular）模版援用变量的魔法

2019年8月20日 263次阅读 来源: 而井

【翻译】【教程】模版援用变量的魔法

原文链接：
https://blog.angulartraining….

作者：
Alain Chautard

译者：
而井

《【教程】（Angular）模版援用变量的魔法》

模版援用变量是个好东西，它许可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
  }
}
    原文作者：而井
    原文地址: https://segmentfault.com/a/1190000017504793
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞