怎么在Angular2中绑定数据-创新互联

本篇文章为大家展示了怎么在Angular2中绑定数据，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联是一家集网站建设,白银企业网站建设,白银品牌网站建设,网站定制,白银网站建设报价,网络营销,网络优化,白银网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

使用插值表达式将一个表达式的值显示在模版上

{{productTitle}}

使用方括号将HTML标签的一个属性值绑定到一个表达式上

使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上

按钮绑定事件

注意

在开始下面的例子之前，请先确认已经新建了一个工程。如果没有，请查看：Angular2学习笔记之Angular CLI 安装和使用教程

事件绑定

准备工作

了解目的：在模版的界面上面增加一个按钮，然后通过小括号绑定一个事件。

新建一个 bind 组件，使用命令:  ng g c bind

修改 bind.component.html

按钮绑定事件

修改 bind.component.ts

//在 BindComponent 类方法中增加方法体
onClickButton(event: any){
 console.log(event);
}

修改 app.component.html

图示：

Dom属性绑定

例子一

插值表达式 与 属性绑定 之间的关系

两种方式都可以实现，angular 在实现的逻辑上面是： 在程序加载组件的时候，会先将 "插值表达式" 翻译为 "属性绑定"

修改 bind.component.html

修改 bind.component.ts

//增加变量
imgUrl: string = http://placehold.it/320x280;

图示：

例子二

dom 属性 与 html 属性的区别

HTML元素的 DOM属性和 HTML 属性是有部分区别的，这点需要明确差异。

修改 bind.component.html

修改 bind.component.ts

//增加 event事件
onInputEvent(event: any){
 //获取的是 dom 属性，即输入属性
 console.log(event.target.value);

 //获取的是 html 属性，也就是初始化的属性
 console.log(event.target.getAttribute("value"));

}

图示：

总结：

1.少量的 HTML属性和 DOM属性之间有这 1 ：1 的映射关系，如 :id
2.有些有 HTML属性，没有DOM 属性， 如：colspan
3.有些有 DOM属性，没有HTML 属性，如：textContent
4.就算名字一样，DOM属性和HTML属性获取的内容可能不一样
5.模版绑定是通过DOM属性绑定的，而不是通过HTML属性
6.HTML属性指定了初始值，DOM属性表示当前值；DOM属性的值可以改变，HTML的值不能改变

例子部分完整代码

bind.component.html

 bind works!


按钮绑定事件


 
 

 
 



 

bind.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-bind',
 templateUrl: './bind.component.html',
 styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

 imgUrl: string = "http://placehold.it/320x280";

 constructor() { }

 ngOnInit() {
 }

 onClickButton(event: any){
  console.log(event);
 }

 onInputEvent(event: any){
  //获取的是 dom 属性，即输入属性
  console.log(event.target.value);

  //获取的是 html 属性，也就是初始化的属性
  console.log(event.target.getAttribute("value"));
 }
}

上述内容就是怎么在Angular2中绑定数据，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：怎么在Angular2中绑定数据-创新互联
链接分享：http://cxhlcq.com/article/ceppjs.html