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

而使用了 ​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 type of #ref

在这个例子中，单击该按钮会调用 ​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模板引用变量
当前链接：http://www.csdahua.cn/qtweb/news6/494456.html

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

广告

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