1、常用单向数据绑定

（1）单向:数据到视图绑定{{}}及管道操作符

xx.component.html:<li><h3>双花括号引用组件中的属性---也叫单向数据到视图绑定</h3>{{title}}<p>我是英雄：{{hero.name}}</p><p>用于调试绑定----{{obj | json}}</p><p>使用参数的管道操作符---Birthdate: {{ data1 | date:'longDate'}}</p><p>多管道串联---Title through a pipe chain: {{title1 | uppercase | lowercase}}</p>
</li>xx.component.ts:title = '双花括号插值表达式';
hero = {name: '小二郎', age: 6};
obj = {first: 'one',second: 'two'};
data1 = new Date();
title1 = 'abCD';

（2）单向数据到视图绑定 [] = 'expression'   

xx.component.html:<h3>直接引用组件中的属性isUnchanged []='expression'---也叫单向数据到视图绑定</h3>
<span [hidden]="isUnchanged">changed</span>
<input #myInput type="text" [ngModel]="message">{{message}}xx.component.ts:isUnchanged = false;
message = '单向数据绑定';

注意上面例子中[hidden]是span的属性，也是一个全局属性（attribute）,通常这种属性绑定的方法是极其常用的，包括自定义组件的属性绑定也是用这种方法。

注意，angular模板不可以访问后台私有属性或方法

注意理解一下数据到视图的单向绑定，也就说数据变化那么视图里面的相关绑定也会发生变化，如果视图变化，比如input你输入了值，但是ts文件里面的数据源是不发生变化的。双向数据绑定则是视图变化，数据源也发生变化。

2、双向绑定

（1）[(ngModel)]

xx.component.html:<input [ngModel]="pinked" (ngModelChange)="setUppercaseName($event)">
<input type="text" [(ngModel)]="someText">{{someText}}xx.component.ts:pinked = '';
setUppercaseName(value) {this.pinked =  value.toUpperCase().toString();
}
someText = '最简单的双向数据绑定';

注意：使用 ngModel 时需要 FormsModule, 并把它添加到 Angular 模块的 imports 列表中，并且你不能把 [(ngModel)] 用到非表单类的原生元素或第三方自定义组件上，除非写一个合适的值访问器

[(ngModel)] 语法只能设置数据绑定属性。 如果要做更多或者做点不一样的事，也可以写它的展开形式。

3、样式绑定

（1）[style.属性名] = “ ‘属性名对应的设置’ ”

<section [style.border]=" '1px solid red' ">样式绑定</section>

（2）[style.属性名] = “三目运算符表达式”

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>

（3）style专属绑定   [ngStyle] = "某变量名"   

xx.component.html：<div [ngStyle]="currentStyles"> This div is initially italic, normal weight, and extra large (24px).
</div>
<div [ngStyle]="{color: 'white', 'background-color': 'black'}">黑底白字
</div>
xx.component.ts：isUnchanged = true;
canSave = true;
isSpecial = true;
currentStyles = {'font-style':  this.canSave      ? 'italic' : 'normal','font-weight': !this.isUnchanged ? 'bold'   : 'normal','font-size':   this.isSpecial    ? '24px'   : '12px'};

4、css类绑定

（1）[class.xxx]="isxxx"  和 [class]="变量名"---会发生类名覆盖

xx.component.html:<h3>css类  [class.xxx]="isxxx"：添加或删除单个类的最佳途径 </h3>
<div [class.special]="isSpecial">The class binding is special</div>
<!-- reset/override all class names with a binding：页面样式显示为class=bad时的样式-->
<div class="bad special" [class]="badCurly">BadCurly</div>xx.component.ts:isSpecial = true;badCurly = 'bad';xx.component.css:.special{background: #ffff99;font-weight: bolder;
}.bad{background: #ff0000;color:#ffffff;
}

（2）css类专属绑定： ngClass---可以同时添加或移除多个类，它接收一个对象，对象的key值是css类名，value为布尔类型，表示是否应用该样式。

xx.component.html:<h3>专属css类绑定ngClass：可以同时添加或移除多个类</h3>
<div [ngClass]="currentClasses">This div</div>
<input type="text"  [ngClass]="{selected: isSelected}" (mousedown)="isSelected = true"(mouseup)="isSelected= false" (mouseleave)="isSelected = false">
<!-- 样式名包含'-' -->
<div [ngClass]="{'middle-line': false}">用单引号包裹类名
</div>
<!-- 使用样式列表 -->
<div class="base" [ngClass]="['saveable', 'special']"> 同时应用两种样式
</div>xx.component.ts:isSelected: boolean;
isUnchanged = false;
canSave = true;
isSpecial = true;
currentClasses =  {'saveable': this.canSave,'modified': !this.isUnchanged,'special':  this.isSpecial
};xx.component.css:.selected { border: 5px solid green; }
.saveable{color:greenyellow;
}
.modified{color:pink;
}
.special{background: #ffff99;font-weight: bolder;
}

（3）同时绑定普通class及计算的class

// html
<span class="status {{classMap[currentSprite?.status]}}">
{{currentSprite?.statusName}}
</span>// css
.normal {background: linear-gradient(180deg, rgba(111, 255, 0, 0.54) 0%, rgba(77, 255, 0, 0.2) 40%, rgba(77, 255, 0, 0.2) 80%, rgba(75, 255, 0, 0.54) 100%);}.warning {background: linear-gradient(180deg, rgba(255, 170, 0, 0.54) 0%, rgba(255, 170, 0, 0.2) 40%, rgba(255, 170, 0, 0.2) 80%, rgba(255, 170, 0, 0.54) 100%);}.obstacle {background: linear-gradient(180deg, rgba(255, 78, 0, 0.54) 0%, rgba(255, 78, 0, 0.2) 40%, rgba(255, 78, 0, 0.2) 80%, rgba(255, 78, 0, 0.54) 100%);}// js
classMap = {normal: 'normal',warning: 'warning',obstacle: 'obstacle',};

5、例外的attribute绑定   [attr.属性名] = '表达式'

有的标签只有纯粹的attribute，比如colspan

xx.component.html:<table border=1><tr><td [attr.colspan]="1 + 1">One-Two</td></tr><tr><td>Five</td><td>Six</td></tr>
</table><button [attr.aria-label]="actionName">{{actionName}} with Aria</button>xx.component.ts:actionName = '千娇' ;

6、事件绑定
 

xx.component.html:
<h3> 元素、组件及指令的事件绑定 ()="方法（）或expression"</h3>
<h3>事件与property双向绑定   [(ngModule)]='xxx'</h3>

xx.component.html:<a class="app-button demo-indicator" *ngIf = 'hasDemo' (click)="toggleExpand()">{{isDemoExpand ? '收起示例' : '展开示例'}}</a>xx.component.ts:@Input() hasDemo = true;
@Input() isDemoExpand = false;toggleExpand() {if ( !this.hasDemo ) return;this.isDemoExpand = !this.isDemoExpand;this.isDemoExpandChange.emit(this.isDemoExpand);}