核心知识

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 方法