创新互联Angular教程：Angular模板引用变量

模板变量

模板变量可以帮助你在模板的另一部分使用这个部分的数据。使用模板变量，你可以执行某些任务，比如响应用户输入或微调应用的表单。

创新互联是专业的威信网站建设公司，威信接单;提供成都网站设计、成都网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行威信网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

模板变量可以引用这些东西：

模板中的 DOM 元素
指令
元素
TemplateRef
Web 组件

本章包含代码片段的工作实例参阅现场演练 / 下载范例。

语法

在模板中，要使用井号 # 来声明一个模板变量。下列模板变量 #phone 语法在元素上声明了一个名为 phone 的变量

可以在组件模板中的任何地方引用某个模板变量。这里的

Angular 是如何为模板变量赋值的

Angular 根据你所声明的变量的位置给模板变量赋值：

如果在组件上声明变量，该变量就会引用该组件实例。
如果在标准的 HTML 标记上声明变量，该变量就会引用该元素。
如果你在元素上声明变量，该变量就会引用一个 TemplateRef 实例来代表此模板。
如果该变量在右侧指定了一个名字，比如 #var="ngModel" ，那么该变量就会引用所在元素上具有这个 exportAs 名字的指令或组件。

将 NgForm 与模板变量一起使用

在大多数情况下，Angular 会把模板变量的值设置为它所在的元素。在前面的例子中， phone 引用的是电话号码。该按钮的 click 处理程序会把这个的值传给该组件的 callPhone() 方法。

这里的 NgForm 指令演示了如何通过引用指令的的 exportAs 名字来引用不同的值。在下面的例子中，模板变量 itemForm 在 HTML 中分别出现了三次。


  Name
  
  



  {{ submitMessage }}

如果没有 ngForm 这个属性值，itemForm 引用的值将是 HTMLFormElement 也就是

元素。而 Component 和 Directive 之间的差异在于 Angular 在没有指定属性值的情况下，Angular 会引用 Component，而 Directive 不会改变这种隐式引用（即它的宿主元素）。

而使用了 NgForm 之后，itemForm 就是对 NgForm 指令的引用，可以用它来跟踪表单中每一个控件的值和有效性。

与原生的元素不同， NgForm 指令有一个 form 属性。如果 itemForm.form.valid 无效，那么 NgForm 的 form 属性就会让你禁用提交按钮。

模板变量的作用域

可以在包含此模板变量的模板中的任何地方引用它。而结构型指令（如 *ngIf 和 *ngFor 或同样充当了模板的边界。你不能在这些边界之外访问其中的模板变量。

同名变量在模板中只能定义一次，这样运行时它的值就是可预测的。

在嵌套模板中访问

内部模板可以访问外模板定义的模板变量。

在下面的例子中，修改中的文本值也会改变中的值，因为 Angular 会立即通过模板变量 ref1 来更新这种变化。


Value: {{ ref1.value }}

在这种情况下，有一个包含这个的隐式，而该变量的定义在该隐式模板之外。访问父模板中的模板变量是可行的，因为子模板会从父模板继承上下文。

我们用更啰嗦的形式重写上述的代码，可以明确地显示出。





  
  Value: {{ ref1.value }}

但是，从外部的父模板访问本模板中的变量是行不通的。


Value: {{ ref2?.value }}

这个更啰嗦的形式表明 ref2 位于外部的父模板中。


  
  


Value: {{ ref2?.value }}

考虑下面这个带 *ngFor 的使用范例。


  

{{ ref.value }}

这里，ref.value 不起作用。结构型指令 *ngFor 将模板实例化了两次，因为 *ngFor 在对数组中的两个条目进行迭代。因此不可能定义出 ref.value 指向的是谁。

对于结构型指令，比如 *ngFor 或 *ngIf ，Angular 也无法知道模板是否曾被实例化过。

结果，Angular 无法访问该值并返回错误。

访问的模板变量

在上声明变量时，该变量会引用一个 TemplateRef 实例来表示该模板。

在这个例子中，单击该按钮会调用 log() 函数，它把 #ref3 的值输出到控制台。因为 #ref 变量在上，所以它的值是一个 TemplateRef。

下面是一个名为 TemplateRef 的 TemplateRef() 函数在浏览器控制台中展开时的输出。

▼ ƒ TemplateRef()
name: "TemplateRef"
__proto__: Function

模板输入变量

模板输入变量是可以在模板的单个实例中引用的变量。你可以用 let 关键字声明模板输入变量，比如 let hero。

在这个例子中，有几个这样的变量：hero、i 和 odd。


  {{i}}:{{hero.name}}

此变量的范围仅限于可复写模板中的单个实例。可以在其他结构型指令的定义中再次使用相同的变量名。

相反，你可以通过在变量名称前加上 # 来声明模板变量，如 #var。模板变量引用其附加的元素、组件或指令。

模板输入变量和模板变量名称具有各自的名称空间。let hero 中的模板输入变量 hero 和 #hero 中的模板变量 hero 是不同的。

名称栏目：创新互联Angular教程：Angular模板引用变量
URL标题：http://www.shufengxianlan.com/qtweb/news6/494456.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容