数据绑定
以下所有的例子都基于你已经创建好了一个angular项目。
所有的数据绑定，都需要你在ts文件中准备好你需要的数据。
1. 模板绑定/ 插值绑定
首先在ts文件中准备好需要的数据，然后在html文件中用{{}}使用数据。插值绑定更多的是用于显示数据，最简单的例子如下：
// html 文件，例如 test.component.html
<h1>{{name}}</h1>
// ts 文件，例如 test.component.ts
public name:string = 'Sun';
2. 属性绑定
2.1 DOM属性绑定
优先使用DOM属性绑定，语法是 [property] = "variable"，基本属性例如 id，class，title等等；
// html 文件
One: <input type='text' [value]="myName" />
Three: <input type='text' value="{{myName}}" />
// ts 文件
public myName:string = 'Sun';
2.2 HTML 属性绑定
[attr.属性名字="表达式"]，表达式的值会被绑定。例子如下：
// html 文件
<table>
<tr>
<th>Test</th>
<th>Binding</th>
</tr>
<tr>
<td [attr.colspan] = "tableColspan">仙女萝</td>
</tr>
</table>
// ts文件
public tableColspan:string = '2';
为了看上去更清晰，我给table加了点css，效果如下：
attr属性绑定
2.3 css类绑定 （3种方式）
- 方式一： 直接使用 [class] 绑定，这样的绑定方式会覆盖之前所有别的class样式。
// html 文件
<h1 class="apple" [class]="useClass">One</h1>
// ts 文件
public useClass:string = 'banana';
// css 文件
h1 {
text-align: center;
}
.apple {
color: skyblue;
font-size: 20px;
}
.banana {
color: orange;
}
效果如下：
class绑定一
- 方式二：使用
[class.样式名字]="boolean"，表达式的值为布尔类型; 通过表达式的值来判断是否追加这个class。
// html 文件
<h1 [class.apple]="isSpecial">Two</h1>
// ts 文件
public isSpecial:boolean = true;
效果如下（圈出来的这个蓝色的鸭）：
class绑定二
图标样式也可以通过这个来添加的，例子如下：
<span *ngFor="let star of stars" class="glyphicon glyphicon-star"
[class.glyphicon-star-empty]="star"></span>
// ts 文件
private stars: boolean[];
this.stars = [false, false, true, true, true];
- 方式三：
[ngClass]="对象"
// html 文件
<div [ngClass]="{a:isA, b:isB, c:isC}">嘤嘤嘤</div>
// ts 文件
public isA:boolean = true;
public isB:boolean = true;
public isC:boolean = true;
// css 文件
.a {
border: 1px solid black;
}
.b {
color: pink;
}
.c {
text-align: center;
font-size: 22px;
}
效果如下：
class绑定三
2.4 样式绑定
- 绑定单个样式的
// html 文件
<h2 [style.color]="isSpecial?'green':'orange'">奇变偶不变</h2>
<h2 [style.color]="pinkColor">符号看象限</h2>
// ts 文件
public isSpecial:boolean = true;
public pinkColor:string = 'pink';
效果如下：
样式绑定
- 绑定多个样式
喜欢哪种用哪种鸭，例子如下：
// html文件 （那个 ft 记得在ts里面申请一个boolean类型的变量）
<div [ngStyle]="{'font-style':ft?'italic':'normal',
'border': '1px solid black', 'width': '200px'}">
一白遮百丑，一胖毁所有。
</div>
// html 文件
<div [ngStyle]="multiStyle"></div>
// ts 文件
public multiStyle: any = {
color: pink,
width: 200px,
... ...
}
3. 事件绑定
小括号表示这是个事件绑定，括号内是事件的名称。 $event 是事件对象，如果用不上可以不写，不传。
语法：(event)="xxx($event)"
// html 文件
<button (click)="clickMe()">点我鸭</button>
// ts 文件
clickMe():void {
alert("鸭！你点我干啥！");
}
通过 $event 对象取得用户输入
<input (keyup)="onKey($event)">
<p>{{values}}</p>
// ts文件
public values:string = '';
onKey(event:any) {
this.values += event.target.value + ' | ';
}
模板引用变量（通过在标识符前加上#实现），这个真的很实用！很实用！很实用！一定要看两眼哒！！
// html 文件中
<input #box (keyup)="onKey(box.value)">
<p>{{values}}</p>
// ts 文件中
public values:string = '';
onKey(value: string) {
this.values = value;
}
监听用户按下enter键，获取输入框的值
<input #box (keyup.enter)="values=box.value">
<p>{{values}}</p>
BLUR(失去焦点)事件
<input #box (keyup.enter)="values=box.value"
(blur)="values=box.value">
<p>{{values}}</p>
4. 双向绑定
双向绑定其实就是属性绑定和事件绑定的结合。
语法： [(ngModel)]="xxx"
注意：如果你要使用 ngModel这个语法，一定一定一定要在 app.module.ts文件中导入 FormsModule:
FormsModule
如果有小可爱碰到了下面这个错误提示：
Can't bind to 'ngModel' since it isn't a known property of 'input'.
那就是因为你忘记导
FormsModule了。
下面是双向绑定的例子：
// html 文件
<div>
Input: <input [(ngModel)]="content">
</div>
Content: {{content}}
// ts 文件
public content:string = 'aaa';
分解看看就是这样：
// html 文件
<div>
Input: <input type="text" #a [value]="content"
(input)="inputChange(a.value)" />
</div>
Content: {{content}}
// ts 文件
public content:string = 'aaa';
inputChange(data) {
this.content = data;
}
效果如下：
效果鸭
指令
angular中有3种类型的指令：组件指令、属性指令、结构指令。
1. 组件指令，举个例子：<router-outlet>
2. 属性指令，在上文中其实已经提及过了。就是[ngClass], [ngStyle] 这两个东西，具体用法在上文中也已经给了一些例子，这里就不详细的再解释一遍了。
3. 结构指令，在介绍结构指令之前，先重点的注意一下 *；结构指令中，星号是一个 “语法糖”，所以在使用结构指令的时候，千万别忘记加*。
- *ngIf 指令
语法：*ngIf="表达式"
我们可以通过使用*ngIf这个指令向DOM中添加或者移除某个元素。
<p *ngIf="true">如果条件为真，那么你可以看到这段文字。</p>
- *ngFor 指令
语法：*ngFor="表达式"
下面例子中的let person of people的意思是：
取出people数组中的每个person，并在每次迭代时使用。
let i = index是获取当前的索引，并且赋值给i。
<li *ngFor="let person of people; let i=index">
{{i+1}} --- {{person.name}}
</li>
// ts 文件
public people:any[] = [
{name:'sun', age: 18},
{name:'Lee', age: 21}
];
效果如下：
*ngFor指令例子效果
网友评论