Angular4学习教程之HTML属性绑定的方法

CSS 类绑定，[class] 全部替换的例子
 
CSS 类绑定，[class.sepcial] 部分替换的例子
 

CSS 类绑定，[ngClass] 替换多个的例子

 
 Red 
 
 Red

Something

 
[attr.colspan] 例子：
 

 

 
跨列的例子
 
 

 
单元格1
 
单元格1
 
 

.a{background-color: #A7A9AE;}
.b{color: #488aff;}
.c{font-size: 1rem;}

 
CSS 类绑定例子1：[class]
 
CSS 类绑定，[class] 全部替换的例子

divClass: string;
constructor() {
 //在3秒钟之后将样式设置为 " a b c "
 setInterval(()=>{
 this.divClass = "a b c";
 }, 3000)
}

CSS 类绑定，[class.sepcial] 部分替换的例子

divClass: string;
isSpcial: boolean = false;
constructor() {

 setInterval(()=>{
 this.divClass = "a b c";
 
 //在 3秒钟之后显示样式
 this.isSpcial = true;
 }, 3000)
}

[ngClass]="{aaa:isA, bbb: isB}"

CSS 类绑定，[ngClass] 替换多个的例子

divClass: string;
isSpcial: boolean = false;
isA: boolean = false;
isB: boolean = false;
constructor() {
 setInterval(()=>{
 this.divClass = "a b c";
 this.isSpcial = true;

 this.isA = true
 this.isB = true
 }, 3000)
}

[style.color] = "isSpecial &＃63; 'red' : 'green' "

[ngStyle]= "{'font-style' : this.canSave &＃63; 'italic' : 'normal' }"