这篇文章主要给大家介绍了关于Angular4学习教程之HTML属性绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
前言
本文主要给大家介绍了关于Angular4 HTML属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
简介
基本HTML属性
1 | <td [attr.colspan]= "tableColspan" ></td>
|
Salin selepas log masuk
Css 类绑定
1 2 3 4 5 6 | <!-- 第一种情况 class 类全部替换 -->
<p [ class ]= "pClass" >CSS 类绑定,[ class ] 全部替换的例子</p>
<!-- 第二种情况 替换 class 类的部分属性 -->
<p [ class .a]= "isSpcial" >CSS 类绑定,[ class .sepcial] 部分替换的例子</p>
<!-- 第三种情况 根据表达式显示部分 class 属性-->
<p [ngClass]= "{a:isA, b:isB}" >CSS 类绑定,[ngClass] 替换多个的例子</p>
|
Salin selepas log masuk
Style 属性绑定
1 2 3 4 | <!-- 替换部分的 Style -->
<button [style.color]= "isSpecial ? 'red' : 'green'" ]>Red</button>
<!-- 替换所有的样式 -->
<button [ngStyle]= "{'font-style':this.canSave? 'italic' : 'normal'}" ]>Red</button>
|
Salin selepas log masuk
HTML属性绑定
1 | <td [attr.colspan]=”tableColspan”>Something</td>
|
Salin selepas log masuk
tableColspan 是一个表达式,当界面在渲染的时候会将 tableColspan的值绑定到 attr后面的 colspan 上面去
修改 bind.component.html
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 增加代码 -->
<p>
<p>[attr.colspan] 例子:</p>
<table border= "1px" >
<tr>
<td [attr.colspan]= "colspanSize" >跨列的例子</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格1</td>
</tr>
</table>
|
Salin selepas log masuk
图示:

Css 类绑定
第一种情况
[calss]
someExpression 的值会完全替换掉 class的值。
修改 bind.component.css
1 2 3 | .a{background-color: #A7A9AE;}
.b{color: #488aff;}
.c{font-size: 1rem;}
|
Salin selepas log masuk
修改bind.component.html
1 2 3 4 5 | <!-- 增加代码 -->
<p>
<p>CSS 类绑定例子1:[ class ]</p>
<p [ class ]= "pClass" >CSS 类绑定,[ class ] 全部替换的例子</p>
</p>
|
Salin selepas log masuk
修改 bind.component.ts
1 2 3 4 5 6 7 | pClass: string;
constructor() {
setInterval(()=>{
this.pClass = "a b c" ;
}, 3000)
}
|
Salin selepas log masuk
图示:

第二种情况
[calss.special]
isSpecial 是一个 boolean,当 isSpecial 为 true 的时候会出现 special 的值,为 false的时候不会出现。
修改bind.component.html
1 2 | <!-- 增加代码 -->
<p [ class .a]= "isSpcial" >CSS 类绑定,[ class .sepcial] 部分替换的例子</p>
|
Salin selepas log masuk
修改 bind.component.ts
1 2 3 4 5 6 7 8 9 10 11 | pClass: string;
isSpcial: boolean = false;
constructor() {
setInterval(()=>{
this.pClass = "a b c" ;
this.isSpcial = true;
}, 3000)
}
|
Salin selepas log masuk
图示:

第三种情况
1 | [ngClass]= "{aaa:isA, bbb: isB}"
|
Salin selepas log masuk
aaa 是指标签上面class 的属性值,isA 就boolean, 只有当 isA 为 true 的时候才会显示 aaa 属性。 同理,bbb 也是一样。
修改bind.component.html
1 2 | <!-- 增加代码 -->
<p [ngClass]= "{a:isA, b:isB}" >CSS 类绑定,[ngClass] 替换多个的例子</p>
|
Salin selepas log masuk
修改 bind.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 | pClass: string;
isSpcial: boolean = false;
isA: boolean = false;
isB: boolean = false;
constructor() {
setInterval(()=>{
this.pClass = "a b c" ;
this.isSpcial = true;
this.isA = true
this.isB = true
}, 3000)
}
|
Salin selepas log masuk
图示:

Style 属性绑定
第一种情况
1 | [style.color] = "isSpecial ? 'red' : 'green' "
|
Salin selepas log masuk
控制 style样式的 color, 如果 isSpecial 的值为true,那么color的属性为 red。
第二种情况
1 | [ngStyle]= "{'font-style' : this.canSave ? 'italic' : 'normal' }"
|
Salin selepas log masuk
控制样式 font-style 如果 this.canSave 的值为 trur 那么样式就是 italic, 否则就是 normal
写在最后
1.对于Style的属性绑定和 class 的属性绑定是一样一样的。
2.对于文章中所用的代码是结合了 Angular2学习笔记之数据绑定上面的例子做的, 链接地址://www.jb51.net/article/132122.htm
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
在javascript中如何实现最长公共子序列
在Node.js中如何获取文件上传进度?
为什么Node.js会成为Web应用开发?
javascript该如何实现获取日期段内每天不同的价格
Atas ialah kandungan terperinci 在Angular4中如何实现HTML属性绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!