数据绑定
文章图片
1、事件绑定
$event对象的target属性指向的是input节点，等号右侧的不一定是函数调用，也可能是属性赋值：如图，当button被点击时，组件控制器的saved属性会变成true。ps:绑定的事件除了DOM事件外，也可以自定义事件。
文章图片
2、DOM属性绑定
插值表达式和[img]原则上是一样的;
文章图片
文章图片
文章图片
3、HTML属性绑定
文章图片
文章图片
文章图片
3.1 样式绑定
3.1.1 class样式替换
//模板中
Steven_Qin
...//组件控制器中
divClass:string;
constructor() {
setTimeout(()=>{
this.divClass = 'a b c';
},3000)
}
...//CSS中
.a{
background: yellow;
}
.b{
color: red;
}
.c{
font-size: 60px;
}
3.1.2 class样式追加
//模块中
Steven_Qin
...
//组件控制器中
isBig:boolean = false;
constructor() {setTimeout(()=>{
this.isBig = true;
},3000);
}
3.1.3 [ngClass] 实现对多个类的分别管理
...
//模板中
Steven_Qin
...
//组件控制器中
divClass:any = {
a:false,
b:false,
c:false,
};
constructor() {setTimeout(()=>{
this.divClass = {
a:true,
b:true,
c:true,
};
},3000);
}
3.2 style内联样式绑定
//模板中
Steven_Qin//组件控制器中
isDev:boolean = false;
constructor() {setTimeout(()=>{
this.isDev = true;
},3000);
}
3.2.1 style带单位的
Steven_Qin
3.2.2 [ngStyle]多重内联样式用法
//模板中
Steven_Qin
//组件控制器中
divStyle:any = {
color:'red',
background:'green'
};
constructor() {setTimeout(()=>{
this.divStyle = {
color:'green',
background:'red'
}
},3000);
}
【Angular|Angular data8】4、双向绑定
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-