微客导航 » 文章资讯 » 详解Angular模板引用变量及其作用域

详解Angular模板引用变量及其作用域

2023-09-05 10:27:06 157

Angular模板引用变量

如果你曾经参与过Angular项目的开发，那么你可能一眼就会看出谁将是本文的主角：

若你对此陌生，也无须在意。示例代码的标签的属性中存在一个画风明显与其他属性不同的家伙——#name，这种以一个#开头命名，被附加在DOM元素上的属性，被称为模板引用变量（templatereferencevariables）。

那么何为模板引用变量呢？文档是这样描述的：

AtemplatereferencevariableisoftenareferencetoaDOMelementwithinatemplate.ItcanalsobeareferencetoanAngularcomponentordirectiveorawebcomponent.

模板引用变量可以是Angualr模板中的DOM元素、Angular组件（指令），甚至Web组件的引用，而它具体是什么，则取决于它所依附的元素（不使用指令进行干预时）。如前文示例代码中的模板引用变量name就是这一DOM元素的引用。

既然模板引用变量是模板中某一元素的引用，那理所当然地我们便可以通过这个引用变量"触及"该模板元素的"实体"。这在实际地开发中是十分实用的，考虑以下代码：


{{component.input}}
{{component.func()}}

通过模板引用变量我们获得了app-component组件的实例引用，这使得我们可以轻松地在模板中访问app-component组件内部的成员。在某些情境下，这种能力给我们的开发提供了很大的助力。

模板引用变量的作用域

Youcanrefertoatemplatereferencevariableanywhereinthetemplate.

在文档中，官方毫不含糊地向我们表示：模板引用变量可以在模板中的任何地方使用。最骚的是，“任何地方”还被特别加粗。我们在大多数的时候，并不会对这句话产生疑问，但也许某天你会怀疑这个anywhere是否真实。有如下的代码：






{{component.input}}

当代码运行后，我们将会在控制台看到这样的错误提示：

TypeError:Cannotreadproperty'input'ofundefined

为什么component会是undefined？

答案其实很明显，模板引用对象可以在模板中的任何地方使用，但此例中component的定义与使用却并不在一个template中。文档中所描述的template并不能直接与组件的模板文件划上等号。当我们使用ng-template时，会在当前模板的内部再建立一个新的模板，它的内部无法直接被外部模板触及，因此示例中的component.input自然会引起错误。

当template的定义明确以后，一切都是如此简单：模板引用变量存在作用域，其作用域是它所处的template，而非它所在的模板文件，同时它可以在其作用域内的任何地方被使用。

最后，我们再看一个例子：

当这段代码运行后，我们依旧会在控制台看到：

TypeError:Cannotreadproperty'input'ofundefined

至于背后的原因，我便作为小小的悬念留给大家，由大家自己去了解。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解Angular模板引用变量及其作用域

热门推荐

随机推荐