Angular2+ 属性绑定
前言
当要把视图元素的属性 (property) 设置为模板表达式
时,就要写模板的属性 (property) 绑定
。
Angular的属性绑定是单向数据绑定
,因为值的流动是单向
的,从组件的数据属性
流动到目标元素
的属性。
对于属性绑定,强调以下几点:
- 不可以使用属性绑定来从目标元素拉取值
- 不可以从绑定目标元素的属性来读取它
- 不可以使用元素绑定来调用目标元素上的方法
- 你只可以设置属性绑定.
如果这个元素触发了事件,可以通过事件绑定来监听它们。
如果必须读取目标元素上的属性或调用它的某个方法,得用另一种技术。 参见 API 参考手册中的 ViewChild
和 ContentChild
。
属性绑定的方式
- 使用
[]
进行绑定 - 使用
bind-
进行绑定
以绑定DOM属性到组件为例:
目标属性被[]
包裹着。
组件属性被""
包裹着。
现在你只需要知道:
<img [src]="heroImageUrl">
等同于
<img bind-src="heroImageUrl">
属性绑定的用法
用法1:
绑定DOM属性到组件
语法:
<htmlElement [DOM属性]='组件的属性'> </htmlElement>
举例:
<img [src]="heroImageUrl">
在这个例子中image 元素的src
属性会被绑定到组件的heroImageUrl
属性上。
用法2:
绑定指令属性到组件
语法:
<htmlElement [指令属性]='组件的属性'> </htmlElement>
举例:
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
Angular 会先去看这个名字是否是某个已知指令
的属性名,然再去看是否为DOM属性
。
严格来说,Angular 正在匹配指令的输入属性的名字。 这个名字是指令的inputs数组中所列的名字,或者是带有@Input()装饰器的属性。 这些输入属性被映射为指令自己的属性。
在这个例子中,ngClass指令属性会被绑定到组件的
class`属性上
注意:
如果名字没有匹配上已知指令或元素的属性,Angular 就会报告“未知指令”的错误。
用法3:
绑定自定义组件的模型属性
语法:
<user-defined-tag [指令属性]='组件的属性'> </user-defined-tag>
举例:
<hero-detail [hero]="currentHero"></hero-detail>
用法4:
属性绑定和插值表达式
很多情况下,使用插值表达式
跟属性绑定
的效果相同:
<img src="{{heroImageUrl}}">
等效于
<img [src]="heroImageUrl">
但是这种情况仅仅存在于数据类型是字符串
时,如果是其他数据类型,就必须使用属性绑定了。
attribute绑定(特性绑定)
attribute
和property
都可以翻译成属性。但是前面所说的属性绑定是Property binding
,而这里说的是ttribute绑定
。
小红书对这两个单词有不同的翻译,用以区别不同:
Property——属性
attribute——特性
简单的理解:
Attribute
就是DOM节点自带的属性,例如html中常用的id、class、title、align.
Property
是这个DOM元素作为对象,其附加的内容, 例如childNodes、firstChild.
注意:
常用的Attribute,例如id、class、title等,已经被作为
Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义
的Attribute,就不会有这样的特殊优待。
因此,当元素没有属性可绑的时候,就必须使用 attribute 绑定。
考虑 ARIA, SVG 和 table 中的 colspan/rowspan 等 attribute。它们是纯粹的 attribute,没有对应的属性可供绑定。
如果想写出类似下面这样的东西,现状会令我们痛苦:
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
会得到这个错误:
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
(模板解析错误:不能绑定到 'colspan',因为它不是已知的原生属性)
正如提示中所说,元素没有colspan属性。它只有colspan特性,但是插值表达式和属性绑定只能设置属性,并不能设置特性attribute。
attribute 绑定
我们需要attribute 绑定
来创建和绑定到这样的 attribute。
attribute 绑定的语法与属性绑定类似。
但方括号中的部分不是元素的属性名
,而是由attr前缀
,一个点 (.
) 和attribute 名字
组成。 可以通过值为字符串表达式
来设置 attribute 的值。
这里把[attr.colspan]绑定到一个计算值:
<table border=1><!-- expression calculates colspan=2 --><tr><td [attr.colspan]="1 + 1">One-Two</td></tr><!-- ERROR: There is no `colspan` property to set!<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>--><tr><td>Five</td><td>Six</td></tr>
</table>
这里是表格渲染出来的样子:
attribute 绑定的主要用例之一是设置 ARIA attribute(译注:ARIA指可访问性,用于给残障人士访问互联网提供便利
), 就像这个例子中一样:
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
作者:maomaolaoshi
原文:https://blog.csdn.net/maomaolaoshi/article/details/75158606
Angular2+ 属性绑定相关推荐
- Angular2属性绑定
当要把视图元素的属性 (property) 设置为模板表达式时,就要写模板的属性 (property) 绑定. Angular的属性绑定是单向数据绑定,因为值的流动是单向的,从组件的数据属性流动到目标 ...
- Angular开发(三)-关于属性绑定与事件绑定
一.新建一个项目工程并创建一个组件bind,如果还有不知道怎么创建angular项目的请先查看Angular2从环境搭建到开发建议直接用angular-cli创建 二.数据绑定 插值的方式[比较常见] ...
- java mvc 绑定_关于Java:Spring MVC:将请求属性绑定到控制器方法参数
在Spring MVC中,很容易将请求参数绑定到处理请求的方法参数. 我只是使用@RequestParameter("name"). 但是我可以对request属性做同样的事情吗? ...
- 用DataBindings属性绑定控件的值
WinForm中的很多控件,如Label.TextBox等都包含DataBindings属性,其类型为ControlBindingsCollection,是Binding类的集合.Binding类代表 ...
- Ember.js 入门指南——handlebars属性绑定
2019独角兽企业重金招聘Python工程师标准>>> 本文从http://www.ibeginer.sinaapp.com迁移过来,欢迎访问原页面. 简单讲属性绑定其实就是在HTM ...
- 案例:简单计算器|| 属性绑定||v-model指令的本质||样式绑定
需求:实现简单的加法计算,分别输入数值a和数值b ,点击计算按钮,结果显示在下面. <!DOCTYPE html> <html lang="en"> < ...
- a标签居中 img vue_Vue中img的src属性绑定与static文件夹实例
不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: 这样写肯定是不对的,正确的写法应该使用v-bind: ...
- VUE基本语法1-插值 属性绑定
.1 插值绑定 插值绑定是Vue中最常见.最基本的语法,绑定的内容主要有文本插值和HTML插值两种 文本插值 文本插值的方式十分简单,只要用双大括号(Mustache语法)将要绑定的变量.值.表达式括 ...
- Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式 点击按钮 ...
最新文章
- 献上程序员大学四年珍藏的30个宝藏网站,全部拿出来
- mysql my.cnf参数配置_MySQLmy.cnf参数配置优化详解
- 在阿里云Kubernetes上运行SpringCloud示例PiggyMetrics
- 如何自己动手写一个搜索引擎?我是一份害羞的教程
- mysql查询今天,昨天,近7天,近30天,本月,上一月数据
- foundation框架之反射机制
- Thonny -- 简洁的 python 轻量级 IDE
- ARM汇编杂项伪指令
- java原理教程,java基础之运行原理(一),java基础运行原理
- java队列 双队列_Java队列– Java队列
- PHP逆波兰表达式的算法
- 享20个Android游戏源码
- SP_Flash_Tool_For_win10
- Ubuntu下FileZilla的安装
- DIY照片证件照打印商城微信百度支付宝小程序开发
- Android NFC应用小木公交
- 小猫爪:嵌入式小知识01-存储器
- eclipselink 数据库表命名规则 驼峰转下划线/表名转换
- 免杀的N种姿势-msf篇
- 北京航空航天大学研究生院计算机科学与技术哪个方向偏嵌入式,北京航空航天大学研究生专业介绍:计算机科学与技术...
热门文章
- POJ - 2187 Beauty Contest (求距离最远点对-凸包+旋转卡壳/枚举 (旋转卡壳学习))
- 个人所得税计算函数 Oracle可用
- 多智能体通信:基于通信的多智能体强化学习研究综述
- 域名邮箱的创建,以及如何替换原有QQ邮箱,创建自己的邮箱
- 7月第1周回顾:AMD英特尔四核战在即 华为3Com遭收购传言
- 客户端登陆 T3标准版,已停止工作
- 加拿大鹅“跌倒”,波司登“吃饱”?
- 大街上数字标志图片_大街上的开放组织
- 差异化体验 有信免费电话或成国际化社交黑马
- Prometheus监控案例