angular6 指令

一  在 Angular 中有三种类型的指令：

1. 组件 — 拥有模板的指令

2. 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令  如 NgFor 和 NgIf   用法：*ngIf  *ngFor  语法糖*

3. 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。  NgStyle  和NgSwitch   用法： [NgStyle] [ngClass][ngSwitch]

二  使用举例：结构指令

• 1 <div *ngIf="hero" class="name">{{hero.name}}</div>

• 2 <ul> <li *ngFor="let hero of heroes">{{hero.name}}</li>

         </ul>

      <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">

                 ({{i}}) {{hero.name}}

    </div>

• 3 <div [ngSwitch]="hero?.emotion">

      <app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero>

     <app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero>

     <app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>

  </div>

三 举例 属性指令

• ngStyle

基本用法<div [ngStyle]="{'background-color':'green'}"></<div>
判断添加<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

• ngClass第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类

基本用法 [ngClass]="{'text-success':true}"
判断添加 [ngClass]="{'text-success':username == 'zxc'}"
               [ngClass]="{'text-success':index == 0}"

实例：

const arr = [1, 3, 4, 5, 6]
<ul>
    <li *ngFor="let item of arr, let i = index">
        <span [ngClass]="{'text-danger': i==0}">{{item}}</span>
    </li>
</ul>