typescript 自定义指令

Posted 2021-05-21

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

@Directive({
  selector: '[dirHighlight]'
})
export class HighlightDirective {
  // @HostListener bind a listener to the element hosting this directive which trigger a method declared after this it, it this case foco()
  @HostListener('focus') foco(){
    this.backgroundColor = 'green';
  };
  @HostListener('blur') onmouseleave(){
    this.backgroundColor = 'black';
  };
  // @HostBinding bind a javascript property to the elemen hosting this directive, the value of it it will be change by the value that return the getter after it
  @HostBinding('style.color') get setColor(){
    return this.backgroundColor;
  }
  private backgroundColor = 'black';

}