Angular页面指令

1. Angular页面指令

 分为组件带模板的指令，结构性指令改变宿主文档结构(*ngIf *ngSwitch *ngFor)，属性性指令改变宿主行为 (ngModel ngStyle ngClass)
 [innerHTML] : 将value作为html标签来解析
 
 [textContent]： 将Value作为文本解析 
 
 *ngIf
	*ngIf: 如果vlaue为true, 当前标签会输出在页面中
       *1. <div *ngIf="条件表达式">
              当条件为真的时候需要显示的内容
           </div>
       *2. <div *ngIf="条件表达式 else elseContent">
              当条件为真的时候需要显示的内容
           </div>
           <ng-template #elseContent>
              当条件为假的时候需要显示的内容
           </ng-template>
       *3. <div *ngIf="条件表达式; then thenTemplate else elseTemplate"></div>
           <ng-template #thenTemplate>
             当条件为真的时候需要显示的内容
           </ng-template>
           <ng-template #elseTemplate>
             当条件为假的时候需要显示的内容
           </ng-template>
           
 *ngSwitch
   	 <ul [ngSwitch]="score">
      	<li *ngSwitchCase="1">已支付</li>
		<li *ngSwitchCase="2">订单已经确认</li>
		<li *ngSwitchCase="3">已发货</li>
		<li *ngSwitchDefault>无效</li>
     </ul>
     
 *ngFor : 遍历
	* 遍历数组 : *ngFor="let item of list;let i = index;">  let first = first; let last = last;指定第一个和最好后一个（布尔）。 let odd = odd；let even = even;指定奇偶（数组的索引）。 trackBy：trackElement;提高性能类似vue中的key

 (click)=”getData($event)”: 绑定事件监听
	* 监视具体的按键: (keyup.keyCode)   (keyup.enter)
	* 停止事件的冒泡和阻止事件默认行为: $event.stopPropagation(); $event.preventDefault();

 [自定义] : 强制绑定解析表达式  
	* 很多属性值是不支持表达式的, 就可以使用[xxx]

 [(ngModel)]="inputValue": 注意引入：FormsModule import { FormsModule } from '@angular/forms';
 
 [class.className]: 单样式条件绑定
 
 [ngClass]: [ngClass]="{'red': true, 'blue': false}"
 
 [ngStyle]: [ngStyle]="{'background-color':'green'}"
 
 自定义指令
 	import {Directive} from '@angular/code'
    @Directive({
      selector: '[xxXxx]'
    })
    export class xxXxxDirective{
      
    }
    <div xxXxx></div> 指令所在的元素叫宿主