angular-指令

指令分为两种大的类型：带模板的指令和不带模板的指令。
带模板的指令就是component组件，不带模板的指令又有两种：

1、结构型指令

通过添加和移除dom元素改变dom布局的指令，比如ngIf、ngFor。

2、属性型指令

改变元素的外观和行为的指令，比如ngClass、ngStyle等。

如何自定义指令呢？

首先我们生成一个指令：

ng g directive directives/addbgcolor

模板使用指令：

<h2 [appAddbgcolor]="cc">hello</h2>

addbgcolor.directive.ts:

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

@Directive({
  selector: '[appAddbgcolor]'
})
export class AddbgcolorDirective {
  @Input() appAddbgcolor;
  constructor(public el:ElementRef) {
    el.nativeElement.style.backgroundColor = 'green';
    //el.nativeElement.className = this.appAddbgcolor;
   }
   ngOnChanges() {//数据发生变化时会调用此生命周期
     //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
     //Add '${implements OnChanges}' to the class.
     this.el.nativeElement.className = this.appAddbgcolor;
     this.el.nativeElement.addEventListener('click',()=>{
       this.el.nativeElement.style.border = '10px solid black';
     })
   }

}

通过@Input()装饰器可以获取传递过来的信息，而ElementRef则是dom操作相关的类，在constructor里面注入初始化后就可以自由操作dom了。