Angular之自定义指令

1.自定义指令
这里我们说的指令可以理解为 属性型指令，主要是用来控制组件的外观的。

2.自定义指令的生成

ng gengerate directive directives/my-style

3.目录
在前面的基础上：

image.png

4.自定义指令的使用

指令ts文件代码：

import { Directive,ElementRef,HostListener,Input } from    
'@angular/core'; 
@Directive({
 selector: '[appMyStyle]'
 })
export class MyStyleDirective {
@Input('appMyStyle') styleColor:string;
 defaultColor:string='grey';
 constructor(
 private el:ElementRef,
)  {

   }
  ngOnInit(){
 this.el.nativeElement.style.background = "yellow";
 }
 @HostListener('mouseenter')onMouseEnter(){
 this.highlight(this.styleColor||this.defaultColor||'red');
  }
  @HostListener('mouseleave')onMouseLeave(){
this.highlight(null);
  }
  @HostListener('dblclick')onDblClick(){
  this.el.nativeElement.style.display='none';
    }
    private highlight(color:string){
     this.el.nativeElement.style.backgroundColor=color;
    }
   }

在其他组件中调用：

 {{selector_condition_education}}
{{selector_condition_time}}



序号
职位
工资
学历



{{i}}
{{info?.name}}
{{info?.salary}}
{{info?.education}}
 

主要是 appMyStyle="blue"，blue会通过@input传回到指令中，然后通过指令中的@HostListener('mouseenter')onMouseEnter(){ this.highlight(this.styleColor||this.defaultColor||'red'); }
给显示页面添加外观。