Angular页面指令

分为组件带模板的指令，结构性指令改变宿主文档结构(*ngIf *ngSwitch *ngFor)，属性性指令改变宿主行为 (ngModel ngStyle ngClass)

1.[innerHTML] : 将value作为html标签来解析

2.[textContent]： 将Value作为文本解析

3.*ngIf

    *ngIf: 如果vlaue为true, 当前标签会输出在页面中

      *1.

              当条件为真的时候需要显示的内容

         

      *2.

              当条件为真的时候需要显示的内容

         

         

              当条件为假的时候需要显示的内容

         

      *3.

         

            当条件为真的时候需要显示的内容

         

         

            当条件为假的时候需要显示的内容

         

4.*ngSwitch

   

       

• 已支付

       

• 订单已经确认

       

• 已发货

       

• 无效

   

5.*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

6.(click)=”getData($event)”: 绑定事件监听

    * 监视具体的按键: (keyup.keyCode)  (keyup.enter)

    * 停止事件的冒泡和阻止事件默认行为: $event.stopPropagation(); $event.preventDefault();

7.[自定义] : 强制绑定解析表达式 

    * 很多属性值是不支持表达式的, 就可以使用[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{

    }

   

指令所在的元素叫宿主