分為組件帶模板的指令，結(jié)構(gòu)性指令改變宿主文檔結(jié)構(gòu)(*ngIf *ngSwitch *ngFor)易茬，屬性性指令改變宿主行為 (ngModel ngStyle ngClass)
1.[innerHTML] : 將value作為html標(biāo)簽來解析
2.[textContent]： 將Value作為文本解析
3.*ngIf
? ? *ngIf: 如果vlaue為true, 當(dāng)前標(biāo)簽會輸出在頁面中
? ? ? *1. <div *ngIf="條件表達(dá)式">
? ? ? ? ? ? ? 當(dāng)條件為真的時候需要顯示的內(nèi)容
? ? ? ? ? </div>
? ? ? *2. <div *ngIf="條件表達(dá)式 else elseContent">
? ? ? ? ? ? ? 當(dāng)條件為真的時候需要顯示的內(nèi)容
? ? ? ? ? </div>
? ? ? ? ? <ng-template #elseContent>
? ? ? ? ? ? ? 當(dāng)條件為假的時候需要顯示的內(nèi)容
? ? ? ? ? </ng-template>
? ? ? *3. <div *ngIf="條件表達(dá)式; then thenTemplate else elseTemplate"></div>
? ? ? ? ? <ng-template #thenTemplate>
? ? ? ? ? ? 當(dāng)條件為真的時候需要顯示的內(nèi)容
? ? ? ? ? </ng-template>
? ? ? ? ? <ng-template #elseTemplate>
? ? ? ? ? ? 當(dāng)條件為假的時候需要顯示的內(nèi)容
? ? ? ? ? </ng-template>
4.*ngSwitch
? ? <ul [ngSwitch]="score">
? ? ? ? <li *ngSwitchCase="1">已支付</li>
? ? ? ? <li *ngSwitchCase="2">訂單已經(jīng)確認(rèn)</li>
? ? ? ? <li *ngSwitchCase="3">已發(fā)貨</li>
? ? ? ? <li *ngSwitchDefault>無效</li>
? ? </ul>
5.*ngFor : 遍歷
? ? * 遍歷數(shù)組 : *ngFor="let item of list;let i = index;">? let first = first; let last = last;指定第一個和最好后一個（布爾）燃箭。 let odd = odd奶赔；let even = even;指定奇偶（數(shù)組的索引）终吼。 trackBy：trackElement;提高性能類似vue中的key
6.(click)=”getData($event)”: 綁定事件監(jiān)聽
? ? * 監(jiān)視具體的按鍵: (keyup.keyCode)? (keyup.enter)
? ? * 停止事件的冒泡和阻止事件默認(rèn)行為: $event.stopPropagation(); $event.preventDefault();
7.[自定義] : 強(qiáng)制綁定解析表達(dá)式?
? ? * 很多屬性值是不支持表達(dá)式的, 就可以使用[xxx]
8.[(ngModel)]="inputValue": 注意引入：FormsModule import { FormsModule } from '@angular/forms';
9.[class.className]: 單樣式條件綁定
10.[ngClass]: [ngClass]="{'red': true, 'blue': false}"
11.[ngStyle]: [ngStyle]="{'background-color':'green'}"
12.自定義指令
? ? import {Directive} from '@angular/code'
? ? @Directive({
? ? ? selector: '[xxXxx]'
? ? })
? ? export class xxXxxDirective{
? ? }
? ? <div xxXxx></div> 指令所在的元素叫宿主
