1. 绑定数据 {
1.在组件ts文件中定义属性:public 属性名 = ‘数据’
2.在组件中html中定义:{{属性名}}
}
2. 在html获得ts中的值(也可以绑定图片src)
{
静态属性:title = ‘ming’
动态属性:[title] = ‘ts中属性名字’
}
3. Html获得ts中标签
Html中:[innerHTML] = ‘content’
ts中:public content = ‘<h2>你好<h2>’;
4. 绑定样式和类名
[ngClass]和[ngStyle]
5. 绑定事件
{
Html中:<button (click)=“run()”>按钮</button>
ts中:run(){...}
例:键盘事件
Html中:<input type=”text” (keydown)=”keyDown($event)”>
ts中:keyDown(e){e.keyCode //获取键盘code e.target.value}
}
6. 双向绑定(ts改变html立即改变,反向同理)
首先在app.module.ts中声明{
Import{ FormsModule } from ‘@angular/froms’;
FormsModulef放在imports中
}
其次在html中使用:[(ngmodel)] = “ts属性名”
注:可以双向绑定select的值
7. 当input值发生改变绑定:获得元素值传入(用于输入框)
例:(change) = ‘aaa($event.target.value)’