一、内置结构型指令

结构型指令的职责是HTML布局。它们构造或重塑DOM的结构，这通常是通过添加、移除和操作它们锁附加的宿主元素来实现。

常用结构型指令:

1. NgIf----根据条件把一个元素添加到DOM中或从DOM中移除

2.NgFor---对列表中的每条数据重复套用一个模板

3.NgSwitch----一组指令，用于切换一组视图。

二、NgIf

当 NgIf为false时，Angular从DOM中物理地移除了当前元素。它销毁了子树中的组件及其状态，也潜在释放了可观的资源，最终让用户体验到更好的性能。

注：ngIf前面的星号(*) 必须要有

  <button class="btn btn-primary" *ngIf="IsShow">

    提交按钮

  </button>

1.NgIf 添加或移除元素，这和显示/隐藏不是一回事。

  <div class="alert alert-info" [class.hidden]="IsShow">

    class.hidden属性---IsShow

  </div>

  <div class="alert alert-info" [class.hidden]="!IsShow">

    class.hidden属性---!IsShow

  </div>

  <span class="label label-danger" [style.display]="IsShow?'block':'none'">

    IsShow

  </span>

  <span class="label label-warning" [style.display]="!IsShow?'block':'none'">

    !IsShow

  </span>

2.防范空指针错误。

ngIf绑定上下文属性为空时，不抛出异常，当做false处理。

三. NgFor

NgFor 是一个重复器指令---自定义数据显示的一种方式。我们的目标是展示一个由多个条目组成的列表。首先定义两个一个HTML块，它规定了单个条目应该如何显示。

在告诉Angular把这个块当做模板，渲染列表中的每个条目.

  <p>ngFor指令前面要加*号</p>

  <ul class="list-group">

    <li class="list-group-item" *ngFor="let hero of heroes">

      {{hero.name}}

      <span class="label label-success">{{hero.age}}</span>

    </li>

  </ul>

1.模板输入变量

我们可以在ngFor的宿主元素（及其子元素）中引用模板输入变量hero，从而访问该英雄的属性。 这里它首先在一个插值表达式中被引用到，然后通过一个绑定把它传给了<hero-detail>组件的hero属性。

<div *ngFor="let hero of heroes">{{hero.name}}</div>

<hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>

2.带索引的*ngForm

NgFor指令上下文中的index属性返回一个从零开始的索引，表示当前条目在迭代中的顺序。 我们可以通过模板输入变量捕获这个index值，并把它用在模板中。

  <p>带索引的*ngFor</p>

  <ul class="list-group">

      <li class="list-group-item" *ngFor="let hero of heroes;let i=index;">

          <span class="label label-warning">{{i}}</span>

        {{hero.name}}

      </li>

    </ul>

四、NgSwitch指令

NgSwitch指令类似于JavaScript的switch语句。 它可以从多个可能的元素中根据switch条件来显示某一个。 Angular只会把选中的元素放进DOM中。

NgSwitch实际上包括三个相互协作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault，例子如下：

<div [ngSwitch]="currentHero.emotion">

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

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

  <confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></confused-hero>

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

</div>

1)HTML绑定：{{}}

(2)属性绑定:[]

注意:属性绑定通常赋值为变量，如果赋值为常量(如字符串常量)

必须用引号括起来，如<img [src]="'../../assets/'+imgUrl">

(3)事件绑定：()

   (click)="add()"

   注意：事件名用()括起来，处理函数后必须有()

(4)指令绑定

(5)双向数据绑定

Vue.js中的常用命令：v-on、v-bind、v-for、v-if、v-show、v-hide、v-else、v-text/html、v-clock

2.Angular中的指令系统

(1)循环绑定  *ngFor

    <ANY  *ngFor="let 临时变量 of 数据">

    <ANY  *ngFor="let 临时变量 of 数据;  let i=index;">

    <ANY  *ngFor="let 临时变量 of 数据;  index as i ">

(4)样式绑定：[ngClass]

    <ANY   [ngClass="obj"]>

     说明：ngClass绑定的值必须是一个对象！对象的属性就是CSS class名，

 属性值为true/false,true的话该class就出现，否则该class不出现。

(5)了解：特殊的选择绑定：

    <ANY    [ngSwitch]="表达式">

                <ANY   *ngSwitchCase="值1"></ANY>

                <ANY   *ngSwitchCase="值2"></ANY>

                 ...

                 <ANY   *ngSwitchDefault></ANY>

    </ANY>

(6)双向数据绑定指令:[(ngModel)]-----重点

     方向 1：Model => View,模型变则视图变，用[ ]绑定

     方向 2：View => Model,视图(表单元素)模型变，用()绑定

     <input/select/textarea [(ngModel)]="uname">

注意：1.如果想直接监视模型数据的改变，可以绑定ngModelChange事件

2.ngModel指令不在commonModule模块中，而在FormsModule中，使用之前必须在

主模块中导入该模块：

      //app.module.ts

      @NgModule({

           imports:[BrowserModule,FormsModule]

     })

Angular中的指令分为三类：

(1)组件指令：NG中Component继承自Directive

(2)结构性指令：会影响DOM树结构，必须使用 * 开头，如*ngFor、*ngIf

(3)属性型指令：不会影响DOM树结构，只是影响元素外观或行为，必须用[ ]括起来，

如[ngClass],[ngStyle]

3.扩展小知识：如何自定义指令

提示：创建指令的简单工具：ng   g   directive   指令名 

自定义指令都是作为元素属性来使用的，selector应该是:[指令名]

<ANY  xuYaoQiangDiao>...</ANY>