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

 更新时间:2018年11月23日 10:44:24   作者:Fortnight  
这篇文章主要介绍了详解Angular模板引用变量及其作用域,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Angular模板引用变量

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

<input type="text" [value]="value" #name>

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

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

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

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

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

<app-component #component [input]="variable"></app-component>
{{ component.input }}
{{ component.func() }}

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

模板引用变量的作用域

You can refer to a template reference variable anywhere in the template.

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

<app-card>
  <ng-template #body>
    <app-component #component [input]="variable"></app-component>
  </ng-template>
  <ng-template #footer>
    {{component.input}}
  </ng-template>
</app-card>

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

TypeError: Cannot read property 'input' of undefined

为什么component会是undefined?

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

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

最后,我们再看一个例子:

<div *ngIf="true">
  <app-component #component [input]="variable"></app-component>
</div>
{{component.input}}

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

TypeError: Cannot read property 'input' of undefined

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

相关文章

  • angular json对象push到数组中的方法

    angular json对象push到数组中的方法

    下面小编就为大家分享一篇angular json对象push到数组中的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Angular.JS内置服务$http对数据库的增删改使用教程

    Angular.JS内置服务$http对数据库的增删改使用教程

    我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象,下面这篇文章主要给大家介绍了关于Angular.JS内置服务$http对数据库的增删改等操作的相关资料,需要的朋友可以参考下。
    2017-05-05
  • Angular 路由route实例代码

    Angular 路由route实例代码

    下面小编就为大家带来一篇Angular 路由route实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • AngularJS入门教程之MVC架构实例分析

    AngularJS入门教程之MVC架构实例分析

    这篇文章主要介绍了AngularJS的MVC架构,结合实例形式重点分析了ng-controller声明并使用控制器的操作技巧与控制器作用域的相关注意事项,需要的朋友可以参考下
    2016-11-11
  • Angularjs的$http异步删除数据详解及实例

    Angularjs的$http异步删除数据详解及实例

    这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,需要的朋友可以参考下
    2017-07-07
  • AngularJS向后端ASP.NET API控制器上传文件

    AngularJS向后端ASP.NET API控制器上传文件

    这篇文章主要介绍了AngularJS向后端ASP.NET API控制器上传文件的相关资料,需要的朋友可以参考下
    2016-02-02
  • 浅谈Angular2 ng-content 指令在组件中嵌入内容

    浅谈Angular2 ng-content 指令在组件中嵌入内容

    本篇文章主要介绍了浅谈Angular2 ng-content 指令在组件中嵌入内容,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • AngularJS中$watch和$timeout的使用示例

    AngularJS中$watch和$timeout的使用示例

    这篇文章给大家介绍了AngularJS中$watch和$timeout的使用例子,通过示例代码相信更能让大家理解,有需要的朋友们下面来一起看看吧。
    2016-09-09
  • 如何通过简单的代码描述Angular父组件、子组件传值

    如何通过简单的代码描述Angular父组件、子组件传值

    Vue组件是学习Vue框架最比较难的部分,下面这篇文章主要给大家介绍了关于如何通过简单的代码描述Angular父组件、子组件传值的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • AngularJS下对数组的对比分析

    AngularJS下对数组的对比分析

    下面小编就为大家带来一篇AngularJS下对数组的对比分析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论