数据绑定
- 数据绑定的本质，就是我们的通讯操作
- 左边的业务逻辑.ts 想传递数据给模板显示 .html 可以通过: 插件表达式 {{data}}, 属性绑定 [property]="data"
-
插值表达式 {{data}}
- 变量调用
.html 里写 <p>{{tracyName}} 今年 {{tracyAge}} 岁 <p>
.ts 在 class 里写 export class HerosComponent implements OnInit {
tracyName:String = '飞飞';
tracyAge:Number = 18;
}
- 函数调用
.html 里写 <p>{{getTracyName()}} <p>
.ts 在 class 里写 export class HerosComponent implements OnInit {
tracyName:String = '飞飞';
tracyAge:Number = 18;
getTracyName(){return this.tracyName;}
}
- 对字符串本身进行输出 {{'值表达式里写的字会直接输入'}}
-
属性绑定 [property]="data"
- 这个属性必须是空间自带的属性，或者我们自定义的属性，不能乱写
- .html 里写 <button type="button" class="btn btn-primary" [disabled]="shuXingMing">Primary</button>
.ts 在 class 里写 export class HerosComponent implements OnInit {
shuXingMing = true;
constructor() { //构造函数
setTimeout(() => { //设置一个延时操作
this.shuXingMing = false;
}, 2000)
}
-
属性绑定 和 差值表达式的区别：
- 当我们的变量类型是字符串的时候，属性绑定 和 差值表达式是完全一致的。
<img src="{{src}}" />
<img [src]="src" /> 我们还是建议这种
- 当我们的变量是 Boolen, 叠加等, 那么我们就只能使用属性绑定的模式， 否则在 .ts 文件中变量变化的时候， .html 显示的东西不会变
- <button type="button" class="btn btn-primary" [disabled]="shuXingMing">Primary</button>
shuXingMing = true;
- 右边的模板显示 .html 想传递数据给 业务逻辑 .ts 需要通过事件处理， 比如 button 的单击事件
- 事件处理 (event) = "expression"
-
单击事件 click
<input type="button" value="按钮" (click)="info()"/> {{tracyName}}
.ts 在 class 里写 export class HerosComponent implements OnInit {
tracyName:String = '飞飞';
info(){
this.tracyName = "11";
}
}
-
change/input 事件 click
<input type="text" (change)="info($event)"/> {{tracyName}}
.ts 在 class 里写 export class HerosComponent implements OnInit {
tracyName:String = '飞飞';
info(event:any){
//console.log(event);//我们就是通过打印这个 event 在控制台里查看到 这个 文本框输入框里的内容是在 target value 里的
this.tracyName = event.target.value;
this.tracyName = (<HTMLInputElement>event.target).value; // 这里也可以做一个强制转化操作，效果一样
}
}
changge 事件： 此事件会在元素内容发生改变，且失去焦点的时候触发，既在输入结束后点击回车触发
input 事件： 此事件会在 value 属性值发生改变时触发，通过js改变value属性值不会触发此事件。 (input 事件的效果很像双向数据绑定，但是双向数据绑定实现的会更多)
- 双向数据绑定
- 结合两种模式 [(ngModel)] = "data" 通过 ngModel 的方式将数据进行双向数据绑定
这里的中括号，代表属性绑定; 小括号代表事件触发; 那么既绑定属性，又绑定事件就代表我们将逻辑层和模板层做了一个双向绑定
- 双向数据绑定: 变量 tracyName，需在 .ts 文件里的 class 里声明
Input A : <input type="text" [(ngModel)]="tracyName" /> 这里直接显示 {{tracyName}}
在使用 input 标签的时候，需要在 app.module.ts 里引入 form 表单组件 FormsModule
在 "imports:" 对象里加 FormsModule 属性 (加属性之前要往上一个属性的后面加个逗号), 然后在头部加声明 import {FormsModule} from '@angular/forms';
看起来这里很像 事件绑定，文本框里的内容改变，显示出来的 {{tracyName}} 就会变。
但是双向数据绑定意味着，如果 {{tracyName}} 的值变了，这个文本框里的东西也会跟着变， 他们是互相的。
比如说我们加一个上面change 事件写的 Input B: <input type="text" (change)="info($event)"/>
这个 Input B 的内容改变，Input A 也会跟着变。 但是 Input A 改变 则不会硬性 Input B 里的内容。 这才是双向数据绑定的含义。
指令(Directives)
指令是在 DOM 对象中的一些提示操作,有三种指令
