ng2 绑定输出html,Angular2的数据绑定
前言
NG的核心部分之一就是数据绑定。它们是内嵌在HTML里面的表达式,用来在HTML文档里产生动态内容。
举个例子:
在这个例子中,div是宿主HTML元素,[]是单向数据绑定的标识,ngClass是目标(有指令型和属性型),getClasses()是表达式(可以直接写在模板里也可以是组件中的函数)。一句话就是宿主元素的目标要绑定到表达式上去,绑定的方向可以是单向的也可以是双向的。
分类
1.方括号单向数据绑定。
[目标]="表达式",数据流动方向为组件->模板
2.字符串插值绑定。
{{表达式}},数据流动方向为组件->模板
3.圆括号单向数据绑定。
(目标) ="表达式",数据流动方向为模板->组件。通常用来处理事件。
4.双向绑定。
[(目标)] ="表达式"。数据流动方向为模板组件
使用
方括号单向数据绑定
绑定属性时需要分清属性(property)和特性(attribute)绑定,绑定样式时有四种可选操作
property绑定
property是存在于DOM里的,例如input元素的value属性。
为了防止表达式返回NUll,在表达式后面跟上一个?
每个元素的property可以参考文档
attribute绑定
attribute是存在于HTML元素里的,不是所有的HTML元素的property都和attribute相符,比如说colspan。NG提供了绑定attribute属性的解决办法。
{{model.getProduct(1)?.name || 'None'}}
类和样式绑定
可以直接绑定HTML元素的样式或者类,也可以使用NG提供的指令达到目标。
类绑定
有三种方式。
[class]="表达式"
把表达式的结果替代原来存在的class
[class]="getClasses(1)"
[class.myClass]="表达式"
根据表达式返回结果添加myClass这个类
[class.myClass]="model.getProduct(2).price < 50"
[ngClass]="map"
把map对象的值添加到class里去,支持三种返回值:字符串,数组,对象
//html
[ngClass]="map"
//ts
map= {
"text-xs-center bg-danger": product.name == "Kayak",
"bg-info": product.price < 50
}
样式绑定
同样三种方式。不过没有替换样式的写法。
[style.color]="表达式"
把表达式的结果设置成单个样式属性。
[style.font-size.em]="表达式"
把表达式的结果设置成指定的样式和单位值。
[ngStyle]="map"
把样式设置成map对象的值。
//ts
map= {
fontSize: "30px",
"margin.px": 100,
color: product.price > 50 ? "red" : "green"
}
字符串插值绑定
它被用于宿主元素的文本内容中。也是一种单向数据绑定,常常用于显示某个数据。
{{data||getData()}}
圆括号单向数据绑定(事件绑定)
事件绑定用于响应宿主元素发送的事件。是用户交互的核心。事件种类请参考文档
{{i + 1}}
也可以直接传入一个Event对象到组件里去。
当需要传入HTML元素到组件时,可以借助模板引用变量
使用双向数据绑定
使用ngModel指令可以简化了双向绑定的语法。
其实NG中的双向绑定就是同时利用了两个方向上的单向绑定,拆开看其实就是:
< input class="form-control" [ngModel]="selectedProduct" (ngModelChange)="selectedProduct=$event.target.value" />
实现原理
NG不像angular1.x使用脏检查来更新数据,而是使用了zone.js库来监视数据的变更,当组件里的数据发生了改变,NG会渲染模板DOM。当DOM的事件被触发了,NG会改变组件里的数据。
总结
数据绑定已经成为了当今前端框架不可或缺的核心特性之一,它让前端人员不再频繁关注视图(html)和逻辑(js)间的同步,而是专心编写高质量/可维护/松耦合的代码。
ng2 绑定输出html,Angular2的数据绑定相关推荐
- ng1和ng2的部分对比----angular2系列(四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
- Angular2+ 双向数据绑定
我们经常需要显示数据属性,并在用户作出更改时更新该属性. 在元素层面上,既要设置元素属性,又要监听元素事件变化. Angular 为此提供一种特殊的双向数据绑定语法:[(x)]. [(x)]语法结合了 ...
- angular绑定数据_Angular中的数据绑定说明
angular绑定数据 数据绑定 (Data Binding) 动机 (Motivation) Data often defines the look of an application. Inter ...
- angular元素属性绑定_AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用...
AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...
- 实例化vue对象 绑定子组件_Vue-双向数据绑定
实例 Vue.js应用的创建很简单,通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue: var app = new Vue({//选项 }); 变量 app 就代表了这个 Vue ...
- 一起谈.NET技术,asp.net页面中输出变量、Eval数据绑定等总结
在asp.net应用程序中,在asp.net页面常用的<%@ %>.<%# %>.<%= %>.在全球化的项目中使用<%$ %>绑定资源项目,在asp. ...
- 模拟信号到数字信号转化_从模拟到数字再返回
模拟信号到数字信号转化 In July 1716, Gottfried Wilhelm Leibniz, a 70-year-old lawyer, philosopher, and mathemat ...
- 深入ASP.NET数据绑定(中)——数据双向绑定机理
转载自 阿不 http://hjf1223.cnblogs.com/ 在上一篇<深入ASP.NET数据绑定(上)>中,我们分析了在.NET中的数据绑定语法的一些内部机理.简单说来就是ASP ...
- 【阿不】深入ASP.NET数据绑定(中)—数据双向绑定机理
在上一篇<深入ASP.NET数据绑定(上)>中,我们分析了在.NET中的数据绑定语法的一些内部机理.简单说来就是ASP.NET在运行时为我们完成了页面的动态编译,并解析页面的各种服务器端代 ...
最新文章
- 泛域名PHP,泛域名实现无限二级域名功能
- 正在CPU上运行的进程_进程的概念,系统资源分配的单元
- 概要设计和详细设计区别_一体化工程设计:打破前期工程设计与详细设计之间的藩篱...
- .NET 异步,你也许不知道的5种用法
- 【ArcGIS微课1000例】0011:ArcGIS空间查询(按位置选择Select by Location)完全案例详解
- 项目运行报错java.sql.SQLSyntaxErrorException: Table ‘sell.hibernate_sequence‘ doesn‘t exist
- 脚本语言程序员怎么学习程序设计?
- 国产plc做modbus从站_Modbus-RTU通信
- Flink Batch SQL 1.10 实践
- Java 匿名内部类、Java 中 == 与 equals 的区别
- 在.net中使用鼠标手势的讲述
- paraview热流图(5):只保留一个网格
- 微信小程序——视图层
- 小程序 40163_微信小程序请求openid错误码40163
- JavaGuide--Java篇
- C++-灰度图上色GrayToColor
- 关于谷歌浏览器显示隐私设置错误的解决方案
- 等额本金和等额本息两种贷款方式的比较
- 允许或禁止未知来源apk的安装
- css3总结之: text-align: justify (两端对齐)
热门文章
- ps4手柄驱动linux,Arduino和单片机区别,及Arduino入门教程
- Windows下Zookeeper启动zkServer.cmd报错闪退,找不到zoo.cfg文件
- 步进电机控制Proteus仿真
- ant-bable实现表格输入数据
- No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案
- G-002 波峰焊与回流焊的区别
- Android手写签名 附带背景图设置
- win7 下安装vs2010 pro 失败解决方法
- 《禅与摩托车维修艺术》摘录(二)
- 制作 img系统镜像的详细方法