Angular绑定数据

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)’