Angular2属性型指令

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

1.Components—directives with a template. 组件 — 拥有模板的指令
2.Structural directives—change the DOM layout by adding and removing DOM elements. 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令。 .3.Attribute directives—change the appearance or behavior of an element. 属性型指令 — 改变元素显示和行为的指令。

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

---

样式绑定设置CSS

样式直接绑定对css进行操作，但是这样有诸多不便（例如多个样式）

<p [style.background]="'lime'">I am green with envy!</p>

---

属性指令

先来看看指令的写法：

import { Directive, ElementRef, Input, Renderer } from '@angular/core';@Directive({ selector: '[myHighlight]' })export class HighlightDirective {    constructor(el: ElementRef, renderer: Renderer) {       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');    }}

其中，@Directive装饰器来指定myHighlight为属性指令。
el用来访问DOM，renderer用来操作DOM中的CSS样式
在使用指令的component中声明，用来使用，

  declarations: [    HighlightDirective  ],

在html中使用

<p myHighlight>Highlight me!</p>

这个p段落文字背景色将会是黄色显示

---

关于事件响应