Angular 中使用模板引用变量

2020-08-05T17:55:11
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

您在 Angular 中使用过模板引用变量吗?也许您不记得它们到底是什么或代表什么。它们使您可以轻松快捷地访问DOM元素或当前模板中的组件或指令的实例。通过写一个井号(#)和一个名称作为DOM元素的附加属性来定义它们。如果此DOM元素只是一个普通元素,则该变量包含对该元素的引用。 在这种情况下,您可以通过以下变量访问该DOM元素的任何属性:

<input type="text" (change)="true" #variable>
<span> {{ variable.value }} </span>

在这个例子中,当输入框失去焦点时,span里值则为输入框中的值。

如果变量在组件中,则该变量将代表该组件的实例。

<my-component #variable [input]="'hello'"></my-component>  
{{ variable.input }}

如果要访问某个指令的实例,则需要指定哪一个指令,因为DOM元素上可能存在多个指令。指令的装饰器的exportAs属性定义了用于访问该特定实例的属性值。例如,表单DOM元素(NgForm)的FormsModule指令将自身导出为ngForm。这使您能够禁用按钮,直到表单有效。

<form #variable="ngForm">  
  <!-- some more HTML ... -->  
  <button type="submit" [disabled]="variable.form.invalid">Submit!</button>  
</form>

在大多数情况下,这都没有任何问题。 但是有一个障碍。 首先,让我们看一下Angular文档中有关模板引用变量的描述:

"You can refer to a template reference variable anywhere in the template."
"您可以在模板中的任何位置引用模板引用变量。"

听起来不错,后面的文档指出:

"The scope of a reference variable is the entire template."
"引用变量的范围是整个模板。"

是的,但是,请看以下组件的模板

<div *ngIf="true">  
  <my-component #variable [input]="'Do you see me?'"></my-component>
</div>  
{{ variable.input }}

您认为会发生什么? 它会显示组件输入的值“您看到我了吗?” ,相反,您将在控制台中得到一个错误:

TypeError: Cannot read property 'input' of undefined

等等,文档不是说可以在模板的任意位置使用模板引用变量吗?是的,只是除了一些特殊情况以外!

报错的原因是 ngIf 指令或者与星号一起使用的任何其他指令。

这些指令被称为结构化指令,而星号只是语法糖。 每次您使用结构化指令(ngIf,ngFor,ngSwitchCase等)时,Angular的视图引擎都会在两个步骤内将星号减掉(删除语法糖),使其最终形式变为以下最终形式(以先前的ngIf为例)

<ng-template [ngIf]="true">  
  ...  
</ng-template>

你注意到了吗? 与之前的结构化指令相比,出现了一些与众不同的东西 ng-template 节点。

该节点是将模板引用变量的范围限制在当前内部的DOM元素中。由于这个限制,导致该节点外部不能应用模板引用变量。

所以文档对吗? 是的,但是结构化指令会引入新的嵌套模板,并为这些变量设置新的作用域,导致模板引用变量不能在整个模板文件中使用。

扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。