内容简介:【翻译】【教程】模版引用变量的魔法原文链接:作者:
【翻译】【教程】模版引用变量的魔法
原文链接: 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 } }
以上所述就是小编给大家介绍的《(Angular)模版引用变量的魔法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C#图解教程
索利斯 (Daniel M.Solis) / 姚琪琳、苏林、朱晔 / 人民邮电出版社 / 2013-7-1 / CNY 89.00
本书是广受赞誉的C# 图解教程的最新版本。作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式、朴实简洁的文字,并辅以大量表格和代码示例,全面、直观地阐述了C# 语言的各种特性。新版本除了精心修订旧版内容外,还全面涵盖了C# 5.0 的新增特性,比如异步编程、调用者信息、case 表达式、带参数的泛型构造函数、支持null 类型运算等。通过本书,读者能够快速、深入理解C#,为自己的编程生涯......一起来看看 《C#图解教程》 这本书的介绍吧!