1. [ngClass]指令 和 [class]
// 1. [class]切换单一类名
<div [class]="nzLayout === 'vertical' ? '' : 'advanced-form ant-form'"> </div> // 参数: string
<div class="special" [class.special]="!isSpecial">This one is not so special</div> // 判断求值真假，添加删除类
// 2. [ngClass]管理多个类名
<div [ngClass]="'first second'"> </div> <div [ngClass]="ids.length>0?'':'disabled-button'"> </div>
<div [ngClass]="['first', 'second']"> </div>
<div [ngClass]="{'first': true, 'second': true, 'third': false}"> </div>
<div [ngClass]="{'class1 class2 class3' : true}"> </div>
2. [style]指令 和 [ngStyle]
// 1. [style]单一样式
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button> // 带单位 （中线命令）
3. 安全导航操作符 [?.] 防止空属性路径页面报错
// 1. 通过 *ngIf 把属性路径的各部分串起来
<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
// 2. 通过 && 把属性路径的各部分串起来
The null hero's name is {{nullHero && nullHero.name}}
// 3. 安全导航操作符 (?.)
<i *ngIf="item.properties?.scannerDate" class="anticon anticon-check"></i>
4. 模板引用变量 #name : 引用模板中的某个 DOM 元素
<input #phone placeholder="phone number"> // phone 引用的是表示电话号码的 <input> 框
<button (click)="callPhone(phone.value)">Call</button> // 点击事件把 input 值传给了 callPhone 方法
