typescript 自定义指令

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了typescript 自定义指令相关的知识,希望对你有一定的参考价值。

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';

}

以上是关于typescript 自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

typescript 自定义结构型指令

typescript 自定义指令

typescript 属性指令 - 自定义

Vue.js 自定义指令使用 TypeScript 检测点击外部元素

编写自定义指令以在 AngularJS (TypeScript) 中向 ng-options 添加工具提示

编写自定义指令以将工具提示添加到AngularJS中的ng-options(TypeScript)