在 Angular 中有三种类型的指令:
组件 — 拥有模板的指令。
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令。
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
属性型指令
属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。
创建方式
例如创建一个highlight
结构型指令
NgIf
该指令用于根据表达式的值,动态控制模板内容的显示与隐藏。
它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。
语法
<div *ngIf="condition">...</div>
NgFor
该指令用于基于可迭代对象中的每一项创建相应的模板。
它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。
语法
<li *ngFor="let item of items;">...</li>
NgSwitch
Angular 的 NgSwitch 实际上是一组相互合作的指令:NgSwitch、NgSwitchCase 和 NgSwitchDefault。
一个值(hero.emotion)被被赋值给了 NgSwitch,以决定要显示哪一个分支。
NgSwitch 本身不是结构型指令,而是一个属性型指令,它控制其它两个 switch 指令的行为。 这也就是要写成 [ngSwitch] 而不是 *ngSwitch 的原因。
NgSwitchCase 和 NgSwitchDefault 都是结构型指令,因此要使用星号(*)前缀来把它们附着到元素上。
NgSwitchCase 会在它的值匹配上选项值的时候显示它的宿主元素。
NgSwitchDefault 则会当没有兄弟。
NgSwitchCase 匹配上时显示它的宿主元素。
<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-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>
</div>
写法
指令同时具有两种拼写形式大驼峰和小驼峰,比如NgIf 和 ngIf。 这里的原因在于,NgIf 引用的是指令的类名,而 ngIf 引用的是指令的属性名。
指令的类名拼写成大驼峰形式(NgIf),而它的属性名则拼写成小驼峰形式(ngIf)。
星号(*)
指令前加星号,是一个语法糖。
从内部实现来说,Angular 把 *ngIf 属性 翻译成一个 <ng-template>
元素 并用它来包裹宿主元素。
比如下面的例子
<div *ngIf="hero" class="name">{{hero.name}}</div>
angular会将它翻译成
<ng-template [ngIf]="hero">
<div class="name">{{hero.name}}</div>
</ng-template>