简介
使用插值表达式将一个表达式的值显示在模版上
<img src="/UploadFiles/2021-04-02/{{imgUrl}}">使用方括号将HTML标签的一个属性值绑定到一个表达式上
<img [src]="imgUrl" alt="">使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上
<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" alt=""> <!-- 插值表达式绑定 --> <img src="/UploadFiles/2021-04-02/{{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" alt=""> <!-- 插值表达式绑定 --> <img src="/UploadFiles/2021-04-02/{{imgUrl}}">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,数据绑定
帝王谷资源网 Design By www.wdxyy.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
- s14全球总决赛T1战队成员有哪些 2024世界赛T1成员名单一览
- 英雄联盟最年轻的世界冠军是谁 2024最年轻的世界冠军介绍
- lol暗夜星澜宝典什么时候上线 暗夜星澜宝典上线时间介绍
- 听泉赏宝自称病了准备先沉淀 其鉴宝APP仅剩2个商品
- 令人意外 《蚁人3》其实盈利了一点点:8.8万美元
- 外网比较IGN《黑神话》《龙腾4》评分:这不合理!
- 刘思达.2024-在你闪烁时我开始在意【网易电波】【FLAC分轨】
- 王力宏.2007-改変自己【SONY】【WAV+CUE】
- 群星.2009-田野的春天徐沛东精选作品集【太平洋影音】【WAV+CUE】
- 蔡琴-闽南语十年精选[吉马引进版][WAV+CUE整轨]
- 赵鹏-《王者無疆》Hi-Res24-96[FLAC]
- 赵鹏《我的神话》Hi-Res[24bit-96kHz]【flac】
- 五月天《后青春期的诗》[FLAC][1.91G]
- 伍佰 《伍佰精选-滚石香港黄金十年》 [FLAC 192kHz 24bit][2.5G]
- 许巍《时光漫步》 [FLAC][1.7G]