怎么在Angular2中绑定数据

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

创新互联是一家专业提供陵水黎族企业网站建设,专注与成都网站设计、网站制作、H5高端网站建设、小程序制作等业务。10年已为陵水黎族众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

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

<img src="{{imgUrl}}" >
<h2>{{productTitle}}</h2>

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

<img [src]="imgUrl" >

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

<button (click)="onClickButton($event)">按钮绑定事件</button>

注意

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

事件绑定

准备工作

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

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

修改 bind.component.html

<!-- 界面增加代码 -->
<button (click)="onClickButton($event)">按钮绑定事件</button>

修改 bind.component.ts

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

修改 app.component.html

<!-- 增加 app-bind 组件 -->
<app-bind></app-bind>

图示：

Dom属性绑定

例子一

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

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

修改 bind.component.html

<!-- 界面增加代码 -->

<!-- 属性绑定 -->
<img [src]="imgUrl" >

<!-- 插值表达式绑定 -->
<img src="{{imgUrl}}" >

修改 bind.component.ts

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

图示：

例子二

dom 属性 与 html 属性的区别

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

修改 bind.component.html

<!-- 增加代码 -->
<div>
 <input type="text" value="Tom" (input)="onInputEvent($event)">
</div>

修改 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

<p>
 bind works!
</p>

<button (click)="onClickButton($event)">按钮绑定事件</button>

<div>
 <!-- 属性绑定 -->
 <img [src]="imgUrl" >

 <!-- 插值表达式绑定 -->
 <img src="{{imgUrl}}" >
</div>

<div>
 <input type="text" value="Tom" (input)="onInputEvent($event)">
</div>

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中绑定数据，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

当前名称：怎么在Angular2中绑定数据
标题链接：https://www.cdcxhl.com/article34/ipgipe.html

成都网站建设公司_创新互联，为您提供响应式网站、外贸网站建设、网站导航、Google、品牌网站建设、网站收录

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联