Angular 组件与模板

指令概览

在 Angular 中有三种类型的指令：

组件 — 拥有模板的指令
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。

组件是这三种指令中最常用的。

结构型指令修改视图的结构。例如，NgFor 和 NgIf。

属性型指令改变一个元素的外观或行为。例如，内置的 NgStyle 指令可以同时修改元素的多个样式。

属性型指令

属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。控制器类实现了指令需要的指令行为。

/* 引入 指令*/

import { Directive,ElementRef} from '@angular/core';
 /* @Directive 装饰器的配置属性中指定了该指令的 CSS 属性型选择器 */

@Directive({
   /* [] 方括号表示它的属性型选择器*/ s
　　elector: '[appHighlight]'
 })

/* 指令的控制器类 */

export class HighlightDirective {

  constructor(el:ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

<p appHighlight>Highlight me!</p>

总结：Angular 在宿主元素 <p> 上发现了一个 appHighlight 属性。然后它创建了一个 HighlightDirective 类的实例，并把所在元素的引用注入到了指令的构造函数中。在构造函数中，该指令把 <p> 元素的背景设置为了黄色。

响应用户引发的事件

HostListener 加进导入列表中。

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

然后使用 HostListener 装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。

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

@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {
  /* 构造函数只负责声明要注入的元素 el: ElementRef  来为 DOM 元素（el）设置颜色

　　　　构造函数中注入 ElementRef，来引用宿主 DOM 元素，ElementRef 通过其 nativeElement 属性给你了直接访问宿主 DOM 元素的能力。*/

constructor(private el: ElementRef) { }

@Input() defaultColor: string;

/*绑定到 @Input 别名 appHighlight*/

@Input('appHighlight') highlightColor: string;

@HostListener('mouseenter') onMouseEnter() {
　　this.highlight(this.highlightColor || this.defaultColor || 'red');
}

@HostListener('mouseleave') onMouseLeave() {
　　this.highlight(null);
}

private highlight(color: string) {
　　this.el.nativeElement.style.backgroundColor = color;
}

}

html

<div>

  <input type="radio" name="colors" (click)="color='lightgreen'">Green

  <input type="radio" name="colors" (click)="color='yellow'">Yellow

  <input type="radio" name="colors" (click)="color='cyan'">Cyan

</div>

<p [appHighlight]="color">Highlight me!</p>

<p [appHighlight]="color" defaultColor="violet">

  Highlight me too!

</p>

根据属性名在绑定中出现的位置来判定是否要加 @Input。

当它出现在等号右侧的模板表达式中时，它属于模板所在的组件，不需要 @Input 装饰器。
当它出现在等号左边的方括号（[ ]）中时，该属性属于其它组件或指令，它必须带有 @Input 装饰器。