Angular2的模板语法大体上与html一致，功能上增加了数据绑定以及一些控制dom的小功能。
数据绑定主要有以下几种:
1. 插值绑定
2. property绑定
3. attribute绑定
4. class绑定
5. style绑定
6. 事件绑定
7. 局部变量绑定
8. ngModel
9. ngSwitch
10. ngFor
11. ngForTrackBy
其他功能:
1. 管道操作符
2. 安全导航操作符
3. others…
数据绑定方向:
数据方向
语法
绑定类型
从数据源到视图
{ {expression}}
[target] = “expression”
bind-target = “expression”
插值表达式
Property
Attribute
Class
Style
从视图到数据源
(event) = “method(event)”
on-event = “method”
$event可以不传
事件
双向
[(target)] = “expression”
bindon-target = “expression”
双向
Property 和 Attribute区别
Property和Attribute中文都叫属性，但这两者是有区别的。
Property由Dom定义，Attribute由HTML定义。
* 少量 HTML attribute 和 property 之间有着 1:1 的映射，如id。
* 有些 HTML attribute 没有对应的 property，如colspan。
* 有些 DOM property 没有对应的 attribute，如textContent。
* 大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样！
Dom property由attribute初始化，一旦初始化完成，attribute就没有用了。attribute的值不能改变，但property却可以。
就算名字相同，HTML attribute 和 DOM property 也不是同一样东西。
模板绑定是通过 property 和事件来工作的，而不是 attribute。
NgModel
NgModel适用表单的双向绑定，其原理是封装了value property的单向绑定和input事件。
ngModel还有展开形式，用于手工处理用户输入的数据:
<input
[ngModel]="currentHero.firstName"
(ngModelChange)="setUpperCaseFirstName($event)">
demo:
TemplateComponent:
import {Component, OnInit, ChangeDetectionStrategy, AfterViewInit} from '@angular/core';
@Component({
selector: 'app-template',
templateUrl: './template.component.html',
styleUrls: ['./template.component.css'],
changeDetection:ChangeDetectionStrategy.Default
})
export class TemplateComponent implements OnInit,AfterViewInit {
ngAfterViewInit(): void {
//更新时间
setInterval(()=>{
this.currentDate=new Date();
},1000);
}
title="template title";
inputType="text";
clickCount=0;
currentDate=new Date();
obj:any;
inputText="";
toeChoice="Moe";
array=[];
constructor() { }
ngOnInit() {
// this.obj={};
// this.obj.title="adffs";
this.array.push({title:'aaaa',id:1});
this.array.push({title:'bbbb',id:2});
this.array.push({title:'cccc',id:3});
this.array.push({title:'dddd',id:4});
this.array.push({title:'eeee',id:5});
}
isBlue() {
return false;
}
clickEvent(event) {
event.currentTarget.value="点击 "+(++this.clickCount);
}
ngStyle() {
let styles = {
// CSS property names
'font-style': 'italic',
'font-weight': 'bold',
'font-size': '2rem',
};
return styles;
}
trackByObj(index:number,obj:any) {
return obj.id;
}
}
模板:
<p>
<label>插值绑定:</label><span>{ {title}}</span>
</p>
<p>
<label [title]="title">property绑定</label>
</p>
<p>
<label>attribute绑定:
<tr>
<td [attr.colspan]="1 + 1">Three-Four</td>
</tr>
</label>
</p>
<p>
<label [class.blue]="isBlue()">CSS class绑定，当isBlue()返回true时，加载css类blue</label>
</p>
<p>
<label [ngClass]="{blue: true}">NgClass</label>
</p>
<p>
<label [style.color]="isBlue()?'blue':'red'">CSS style绑定</label>
</p>
<p>
<label [ngStyle]="ngStyle()">NgStyle</label>
</p>
<p>
<label>事件绑定:<input type="button" (click)="clickEvent($event)" value="点击事件绑定"/><span>event可以不传</span> </label>
</p>
<p>
<label>局部变量:<input type="text" #input1 (input)="null"/><span>{ { input1.value }}</span>
此处必须增加一个事件，否则因为value改变没有触发事件，不会实时更新，但类似这样的需求，ngModel更适合</label>
</p>
<p>
<label>管道操作符:{ {currentDate | date: "yyyy-MM-dd HH:mm:ss"}}</label>
</p>
<p>
<label>安全导航操作符:{ {obj?.title}}</label>
</p>
<p>
<label>NgModel:<input type="text" [(ngModel)]="inputText"/><span>{ { inputText }}</span></label>
</p>
<p>
<label>NgIf:<span *ngIf="inputText">Hello, { {inputText}}</span></label>
</p>
<p>
<label>NgSwitch:
<span [ngSwitch]="toeChoice">
<span *ngSwitchCase="'Eenie'">Eenie</span>
<span *ngSwitchCase="'Meanie'">Meanie</span>
<span *ngSwitchCase="'Miney'">Miney</span>
<span *ngSwitchCase="'Moe'">Moe</span>
<span *ngSwitchDefault>other</span>
</span>
</label>
</p>
<p>
<label>NgFor:
<div *ngFor="let obj of array;let i=index">{ {i + 1}} - { {obj.title}}</div>
</label>
</p>
<p>
<label>NgForTrackBy:
<div *ngFor="let obj of array;trackBy:trackByObj">{ {obj.title}}</div>
</label>
</p>
css：
p {
font-size: 1.3rem;
}
.red {
color: red;
}
.blue {
color:blue;
}