详解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

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

赞 (0)

相关推荐

  • AngularJS实现根据变量改变动态加载模板的方法

    本文实例讲述了AngularJS实现根据变量改变动态加载模板的方法.分享给大家供大家参考,具体如下: directive: return { restrict: 'E', replace: true, templateUrl: 'app/view/order.html', link: function (scope, element, attrs) { scope.Type = attrs.Type; } }; 模板: <div ng-switch on="item.Type"&

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

    Angular模板引用变量 如果你曾经参与过Angular项目的开发,那么你可能一眼就会看出谁将是本文的主角: <input type="text" [value]="value" #name> 若你对此陌生,也无须在意.示例代码的<input>标签的属性中存在一个画风明显与其他属性不同的家伙--#name,这种以一个#开头命名,被附加在DOM元素上的属性,被称为模板引用变量(template reference variables). 那么

  • 详解Angular动态组件

    使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现 然后我们来找个把手,看

  • 详解Angular数据绑定及其实现方式

    详解Angular数据绑定及其实现方式

    前言 Web开发需要模型和视图之间的数据同步.这些模型基本上包含数据值,而视图则处理用户看到的内容.因此,如果您想知道这在Angular中是如何发生的,这篇有关Angular数据绑定的文章将为您提供帮助. 下面提到的是此处讨论的主题: What is Data Binding? Types of Data Binding in Angular One-way Data Binding Interpolation Property Binding Event Binding Two-way Dat

  • 详解C++模板编程中typename用法

    typename的常规用法 typename在C++类模板或者函数模板中经常使用的关键字,此时作用和class相同,只是定义模板参数:在下面的例子中,该函数实现泛型交换数据,即交换两个数据的内容,数据的类型由_Tp决定. template <typename _Tp> inline void swap(_Tp& __a, _Tp& __b) { _Tp __tmp = __a; __a = __b; __b = __tmp; } typename的第二个用法:修饰类型 限定名和

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • 详解Kotlin中的变量和方法

    详解Kotlin中的变量和方法 变量 Kotlin 有两个关键字定义变量:var 和 val, 变量的类型在后面. var 定义的是可变变量,变量可以被重复赋值.val 定义的是只读变量,相当于java的final变量. 变量的类型,如果可以根据赋值推测,可以省略. var name: String = "jason" name = "jame" val max = 10 常量 Java 定义常量用关键字 static final, Kotlin 没有static,

  • 详解velocity模板使javaWeb的html+js实现模块化

    详解velocity模板使javaWeb的html+js实现模块化

    详解velocity模板使javaWeb的html+js实现模块化 页面上一些基础数据或者其他页面经常用到部分,可以独立出来做成小组件,组件预留调用入口,需要的页面直接调用即可. 如图,页面中的展示分类和搜索标签在多个页面重复使用,可以将这部分内容独立出来,做成组件,供后续开发调用: classify_search_tag.html文件如下,其中包含HTML节点和jQuery代码: <!-- 展示分类与搜索标签组件使用说明: 1.新增时父页面调用方法:页面加载时调用 goodsClassifyA

  • Java中==符号与equals()的使用详解(测试两个变量是否相等)

    Java中==符号与equals()的使用详解(测试两个变量是否相等)

    Java 程序中测试两个变量是否相等有两种方式:一种是利用 == 运算符,另一种是利用equals()方法. 当使用 == 来判断两个变量是否相等时,如果两个变量是基本类型变量,且都是数值类型(不一定要求数据类型严格相同),则只要两个变量的值相等,就返回true. 但是对于两个引用类型变量,只有它们指向同一个对象时, == 判断才会返回true. == 不可用于比较类型上没有父子关系的两个对象. 很多书上说equals()方法是判断两个对象的值相等.这种说法不准确.实际上equals()方法是O

  • 详解JAVA 强引用

    定义 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器宁愿抛出OOM(OutOfMemoryError)也不会回收它. 说明 不要被这个强字吓到,以为这个引用就很厉害,其实强引用就是程序中使用的一般引用类型.举个简单的栗子: String s = new String("Hello Frank!"); 强可达 如果一个对象与GC Roots之间存在强引用,则称这个对象为强可达(strong reachable)对象. 当你声明一个变量并指向一个实例的时候,其实就是在创造一

  • 详解C++ 模板编程

    类型模板 类型模板包括函数模板和类模板,基本上是C++开发人员接触模板编程的起点. 下面代码演示了函数模板和类模板的使用方法: // 函数模板 template<typename T> T add(const T& a, const T& b) { return a + b; } // 类模板 template<typename T> class Point { private: T x[3]; ... }; 类型模板以template开始声明,尖括号内的typen

随机推荐