什么是内置指令

内置指令 是选择性的包含内容、在不同的内容片段之间进行选择以及重复内容

常用内置指令
1.ngIf
2.ngFor
3.ngSwitch 、ngSwitchCase、ngSwitchDefault
4.ngClass、ngStyle

注意：表达式中不可以使用数据操作符，如=，+=，-，+，++，--

<div *ngIf="expr"></div>

<div *ngFor="let item of expr"></div>

<div [ngSwitch]="expr">
    <span *ngSwitchCase="expr1"></span>
    <span *ngSwitchDefault></span>
</div>

<ng-template [ngTemplateOutlet]="myTemp"></ng-template>

<div [ngClass]="expr"></div>

<div [ngStyle]="expr"></div>

微模板指令

一些指令前面带有号（如ngIf、*ngFor），这类指令依赖模板提供内容，被称为微指令，也称为结构型指令。

<div *ngIf="expr" class="foo">
      今天天气真好！
</div>

// 等价于
<ng-template ngIf="expr">
    <div class="foo">
            今天天气真好！
    </div>
</ng-template>

<div [ngSwitch]="expr">
    <span *ngSwitchCase="2">
        我是2
    </span>
    <span *ngSwitchCase="5">
        我是5
    </span>
    <span *ngSwitchDefault>
        我是默认的
    </span>
</div>

ngFor指令

模板变量，除了index，其他都返回boolean

<div *ngFor="let item of expr; 
let idx=index; 
let odd=odd;
let even=even; 
let first=first;
let last=last;">
    {{idx}}
</div>

ngTemplateOutlet指令

//myContext = {$implicit: '北京', title: '上海'}

<ng-template *ngTemplateOutlet="myTemp;context: myContext"></ng-template>
<div>我是一个间隔</div>
<ng-template *ngTemplateOutlet="myTemp"></ng-template>

<ng-template #myTemp let-obj let-title="title">
    <span>测试模板指令{{obj}} {{title}}</span>
</ng-template>