指令

两种类型，属性型指令，结构型指令。

属性型指令

改变 DOM 元素外观或行为

@Directive({ selector: '[log]' })
export class Log {
    constructor(private el: ElementRef, private render: Renderer2) {
    }
    @HostListener('click')
    onClick() {
        this.render.setElementStyle(this.el.nativeElement, 'background-color', '#f50');
    }
}

结构型指令

改变 DOM 结构的指令，类似 ngIf ngFor

<ng-template [delay]="1000 * i">
    <user-detail [user-id]="item.id"></user-detail>
</ng-template>
<div *ngFor="let item of users | async; let i = index">
    <user-detail [user-id]="item.id" *delay="1000 * i"></user-detail>
</div>

@Directive({ selector: '[delay]' })
export class Delay {
    constructor(private templateRef: TemplateRef<any>, 
                private viewContainerRef: ViewContainerRef) {}
  @Input()
  set delay(time: number) {
    setTimeout(() => {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }, time);
  }
}

参考

• https://cipchk.gitbooks.io/angular-practice/content/component/structural.html 结构型指令
• https://cipchk.gitbooks.io/angular-practice/content/component/attribute.html 属性型指令