Angular2.x 指令

1. 指令：

在 Angular 中有三种类型的指令：
组件 — 拥有模板的指令。

结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令。

属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。

组件是这三种指令中最常用的。
结构型指令修改视图的结构。例如，NgFor、NgIf、NgSwitch。要了解更多，参见结构型指令 。
属性型指令改变一个元素的外观或行为。例如，内置的 NgStyle指令可以同时修改元素的多个样式。

2. 宿主元素（host element）

了解指令前，我们需要先理解宿主元素。对于指令来说，这个概念是相当简单的。应用指令的元素，就是宿主元素。如下文绑定自定义结构型指令的P标签就是宿主元素。

3. 自定义结构型指令

• 创建指令 composition.directive.ts

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[appComposition]'
})
export class CompositionDirective {

  constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef
  ) { }

  @Input()
  set appComposition (c: boolean) {
    if (!c) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

• 使用指令

1. 在组件所属模块declarations中导入

declarations: [
    AppComponent,
    CompositionDirective
],

2. 模板中使用

当appComposition为false时出现这段话

or

当appComposition为false时出现这段话

• 注意：

a. 我们可以使用TemplateRef取得宿主元素的内容，并通过ViewContainerRef来访问这个视图容器。

b. 使用@Input()，通过setter截听输入属性值的变化，设置内嵌视图。

c. 当appComposition为false，调用ViewContainerRef类实例的createEmbeddedView方法创建内嵌视图

4. 自定义属性指令

• 创建指令height-light.directive.ts

import {Directive, ElementRef, HostListener, Input} from '@angular/core';

@Directive({
  selector: '[appHeightLight]'
})
export class HeightLightDirective {
  public default = 'yellow'
  @Input('appHeightLight') light: string
  constructor(
    private el: ElementRef,
    private ren: Renderer2
  ) { }
  @HostListener('mouseenter') onMouseEnter () {
    console.log(this.el)
    this.el.nativeElement.style.backgroundColor = this.light;
    this.ren.setStyle(this.el.nativeElement, 'fontSize', '20px');
  }
  @HostListener('mouseleave') onMouseLeave () {
    this.el.nativeElement.style.backgroundColor = this.default;
  }
}

• 使用指令

1. 在组件所属模块declarations中导入

declarations: [
    AppComponent,
   HeightLightDirective
],

2. 模板中使用

Highlighted in blue

or

Highlighted in orange

• 注意：
  a. HostListener 是属性装饰器，用来为宿主元素添加事件监听。
  b. HostBinding 是属性装饰器，用来动态设置宿主元素的属性值。
  c. Angular 会为每个匹配的元素创建一个指令控制器类的实例，并把 Angular 的ElementRef和Renderer注入进构造函数。ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。Renderer服务允许通过代码设置元素的样式。