文档章节

Angular模板局部变量

前端笔记
 前端笔记
发布于 2017/05/10 12:59
字数 423
阅读 137
收藏 0

 模板局部变量是模板中对DOM元素或指令(包括组件)的引用,可以使用在当前元素及其同级、子元素中。在Angular组件交互中通过局部变量获取子组件引用就是对组件的引用,这里主要说一下DOM元素局部变量和表单指令局部变量。

DOM元素局部变量

在标签元素中定义DOM元素局部变量,只需要在局部变量名前面加上#号,或是前缀ref-

  <div #good id="good">栗子</div>
  <div ref-good id="good">栗子</div>

它的作用是对当前DOM元素的引用,相当于对document.getElementById("good")对象的引用。定义了DOM元素局部变量后就可以使用该元素的DOM属性了。

表单指令局部变量

表单指令局部变量的使用需要在定义时初始化为特定的(NgForm、NgModel、NgModelGroup)表单指令,最终解析后会被赋值为表单指令实例对象的引用。

就是对应表单指令实例对象的引用(FormControl的引用),作用在于模板中追踪表单状态用于表单的数据校验,不过只能在模板中使用。要想在组件中使用,需要用到ReactiveFormsModule里面的指令。

<form #good="ngForm">
  ...
  <input type="..." ... #goodman="ngModel" />
</form>

NgForm和NgModel指令包含五个表示状态的属性

状态               boolean
valid            表单值是否有效 
pristine         表单值是否未改变
dirty            表单值是否已改变
touched          表单是否已被访问过
untouched        表单是否未被访问过

具体使用方法很多,比如

<buttom type="submit" [disable]="!good.valid">提交</buttom>

 

© 著作权归作者所有

前端笔记
粉丝 4
博文 70
码字总数 50296
作品 0
杭州
前端工程师
私信 提问
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
Angular 4.0.0 rc1 发布, Web 前端框架

Angular 4.0.0 rc1 发布,在经过8个 beta 版本后,离 Angular 4 正式版的到来越来越近了。 Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。 更新内容: 视图引擎更改, ...

王练
2017/02/26
3K
16
AngularDart4.0 英雄之旅-教程-02启动应用

码云项目页:https://gitee.com/scooplolwiki/toh-0 此教程讲解Angular的文件架构,(查看源代码)查看应用程序。 创建应用 开始,创建名为angulartourof_heroes的项目,使用WebStorm或者命令...

scooplol
2017/10/19
157
11
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.7K
14
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue v-html动态生成的html怎么加样式

1. v-html加样式 在vue开发中碰到需要动态生成html,并且需要有样式,这时候发现像往常一样写样式的时候不起作用,网上搜了一下,发现通过 v-html 创建的 DOM 内容不受作用域内的样式影响,但...

litCabbage
37分钟前
4
0
Appium+python自动化(三十三)- 测试环境和本地环境傻傻滴分不清楚-Remote(超详解)

  简介   在前边所有涉及启动app的时候有这样一行代码driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub', desired_caps),很多小伙伴们和同学们不知道这个ip和端口哪里来的,我...

开源仔
45分钟前
2
0
各种放大器电路之功率放大器的分析

  供给负载一定输出功率的放大器叫做功率放大器。它是收音机、扩音机或其他电子设备的末级,它推动扬声器发出声音,使电动机转动,使记录仪表动作等。功率放大器主要是考虑如何获得最大的输...

xyxyty
45分钟前
3
0
MySQL8.0.17 - Multi-Valued Indexes 简述

本文主要简单介绍下8.0.17新引入的功能multi-valued index, 顾名思义,索引上对于同一个Primary key, 可以建立多个二级索引项,实际上已经对array类型的基础功能做了支持 (感觉官方未来一定...

阿里云官方博客
今天
13
0
make4.1降级 make-3.81、2错误

在编译 make-3.82 的时候出现如下错误提示 glob/glob.c:xxx: undefined reference to `__alloca'` 修改 /glob/glob.c // #if !defined __alloca && !defined __GNU_LIBRARY__ # ifdef __GNUC......

Domineering
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部