Angular4学习教程之DOM属性绑定详解 - 行业资讯 - 肥雀云

DOM元素触发的一些事件通过DOM层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡。本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习、下面话不多说了,来一起看看详细的介绍吧。

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

　　　　　　& lt; img src=" https://www.yisu.com/zixun/{{imgUrl}}”alt="比; 　　& lt; h2> {{productTitle}} & lt;/h2> 　　　　

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

　　　　　　& lt; img (src)=" imgUrl " alt=" "在　　　　

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

　　　　　　& lt;按钮(点击)=" onClickButton(事件)美元”在按钮绑定事件& lt;/button> 　　　　

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

Angular4学习教程之DOM属性绑定详解“> 
　　
　　准备工作
　　了解目的:在模版的界面上面增加一个按钮,然后通过小括号绑定一个事件。 
　　
　　新建一个绑定组件,使用命令:,ng g c结合 
　　
　　 修改bind.component.html
　　
　　<pre类= 　　& lt; !——界面增加代码——比; 　　& lt;按钮(点击)=" onClickButton(事件)美元”在按钮绑定事件& lt;/button>

修改bind.component.ts 　　　　//在BindComponent类方法中增加方法体　　onClickButton(事件:任何){ 　　console.log(事件); 　　} 　　　　

修改app.component.html 　　　　　　& lt; !——增加app-bind组件——比; 　　& lt; app-bind> & lt;/app-bind> 　　　　

图示: 　　

Angular4学习教程之DOM属性绑定详解

<>强例子一

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

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

修改bind.component.html 　　　　　　& lt; !——界面增加代码——比; 　　& lt; !——属性绑定——比; 　　& lt; img (src)=" imgUrl " alt="比; 　　& lt; !——插值表达式绑定——比; 　　& lt; img src=" https://www.yisu.com/zixun/{{imgUrl}}”alt="在　　　　

修改bind.component.ts 　　　　//增加变量　　imgUrl:字符串=http://placehold.it/320x280; 　　　　

图示: 　　

Angular4学习教程之DOM属性绑定详解

<>强例子二

dom属性与html属性的区别

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

修改bind.component.html 　　　　　　& lt; !——增加代码——比; 　　& lt; div> 　　& lt;输入类型="文本" value=" https://www.yisu.com/zixun/Tom "(输入)=皁nInputEvent(事件)美元”在　　& lt;/div> 　　　　

修改bind.component.ts 　　　　//增加事件事件　　onInputEvent(事件:任何){//获取的是dom属性,即输入属性　　console.log (event.target.value);//获取的是html属性,也就是初始化的属性　　console.log (event.target.getAttribute(“价值”); 　　} 　　　　

图示: 　　

Angular4学习教程之DOM属性绑定详解