【教程】（Angular）模版引用变量的魔法

1treeS 发布于2019-08-23 14:16 / 678人阅读

摘要：翻译教程模版引用变量的魔法原文链接作者译者而井模版引用变量是个好东西，它允许完成许多有用的事情。所以变量持有了相应实例对象的任何属性和方法，如等。它告诉嘿，如果有人想用模版引用变量来指向这个指令，那么指令的名字就叫做。

【翻译】【教程】模版引用变量的魔法

原文链接：https://blog.angulartraining....  
作者：Alain Chautard
译者：而井

模版引用变量是个好东西，它允许Angular完成许多有用的事情。我经常称这个功能为“井号语法”，因为在模版中它依赖一个简单的井号来创建对一个元素（译者注：元素包括HTML元素和组件元素）的引用：

上述的语法是如此的简洁：它创建了一个指向input元素的引用，这个引用稍后可以在我的模版中使用。需要注意的是，这个（引用）变量的作用域是它所定义的整个HTML模版（的范围）（译者注：即在定义这个引用变量的HTML模版中都可以访问这个变量）。

例如，这里就是我如何用这个引用来获取输入框的值（的例子）：

注意那个phone（变量）指向了input的HTMLElement对象实例。所以phone（变量）持有了（相应）HTMLElement（实例对象）的任何属性和方法，如id、name、innerHTML、value等。

上述是一种避免使用ngModel或其他数据绑定的好方法，（因为）这种方法在校验方面上不需要写太多代码。

在组件上也奏效吗？

答案就是可以奏效！假设我们有HelloWorldComponent如下：

@Component({
  selector: "app-hello",
  template: `
    
      Hello {{name}}
    
  `
})
export class HelloComponent {

   name = "Angular";
}

现在按照如下代码，我们使用了“井号语法”得到了组件的引用：

它（模版引用变量）一个最好的地方就是我们可以获取实际上的组件实例对象HelloWorldComponent。所以我们可以访问这个组件的任何方法或属性，即使他们（的权限）是声明为私有或保护的，多么令人惊喜：



{{helloComp.name}}

我们不仅可以通过这种语法来读取一个组件的数据，而且也能修改它。

对指令也奏效吗？

当然（可以），不过这里需要进一步了解它（模版引用变量）。大部分的指令将会被作为（译者注：HTML或组件标签）的属性来使用，这意味着我们无法在那里真正应用“井号语法”，除非我们使用相同的语法进行扭转：

在上面的例子里，myForm是一个指向（应用于表单的）ngForm指令的引用。

现在如果你细看上面的HTML元素，你可能会想：“等一下，那里并没有ngForm指令！我没有见过任何属性叫ngForm的！”，你（如果）这样想就对了。

答案就在ngForm指令的源代码中：

@Directive({
  selector: "form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]",
  ...
  exportAs: "ngForm"
})

看到那个指令的选择器的了没？它（指令）将应用于任何没有ngNoForm和formGroup属性的form表单元素之上。因此，ngForm指令将自动应用于我的form元素之上。

第二个被注意到的趣事就是装饰器中的exportAs属性。它告诉Angular：“嘿，如果有人想用模版引用变量来指向这个指令，（那么指令的）名字就叫做ngForm”。

现在我们已经知道它是如何运作的了。我们可以创建定制指令，并通过一个叫exportAs的来暴露该指令。

译者附

为了方便大家理解模版引用变量对指令的操控，我把相关链接的核心演示代码附在本文最后面。

import {Component} from "@angular/core";
import {NgForm} from "@angular/forms";
 
@Component({
  selector: "example-app",
  template: `
    
      
      
      
    
    
    First name value: {{ first.value }}
    First name valid: {{ first.valid }}
    Form value: {{ f.value | json }}
    Form valid: {{ f.valid }}
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value); // { first: "", last: "" }
    console.log(f.valid); // false
  }
}

云服务器 GPU云服务器引用类型的变量 php的变量引用 php中的变量引用模版变量

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100378.html

理解Angular2中的ViewContainerRef

摘要：注意本文不是关于如何用编程的方式来创建组件的文章。在这个例子中，容器元素就是元素，模版将作为这个元素的兄弟节点被插入。用来演示以组件自身作为视图容器，将组件中的模版插入视图容器的效果。原文链接：https://netbasal.com/angular-...作者：Netanel Basal译者：而井 showImg(https://segmentfault.com/img/bVbl...

Codeing_ls 2019-08-26 13:27 评论0 收藏0
Ionic2入坑基础教程和安装指南

摘要：安装程序主要通过命令行工具来创建和开发，并使用来构建和部署为原生应用程序。基础教程确保完成之前的安装并测试启动成功。安装Ionic Ionic 2 程序主要通过Ionic命令行工具CLI来创建和开发，并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。安装Ionic CLI 和 Cordova 要创建 Ionic 2 项目，你需要安装最新版...

jayce 2019-08-21 14:35 评论0 收藏0
Angular 4 简单入门笔记

摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...

whlong 2019-08-20 17:44 评论0 收藏0
Angular学习随笔

摘要：最近在看，随手记的一些的随笔。新上手或者准备学的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。处理当前路由离开的情况。在路由激活之前获取路由数据。最近在看angular4，随手记的一些angular的随笔。新上手或者准备学angular的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。技术交流群：513590751 Angular...

jindong 2019-08-20 16:50 评论0 收藏0
Angular学习随笔

摘要：最近在看，随手记的一些的随笔。新上手或者准备学的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。处理当前路由离开的情况。在路由激活之前获取路由数据。最近在看angular4，随手记的一些angular的随笔。新上手或者准备学angular的可以用作参考，第一次写博客，笔记不算完整，若老司机发现有不足指出请指出。技术交流群：513590751 Angular...

Batkid 2019-08-20 16:50 评论0 收藏0