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

在其他组件中调用：

<table class="table">
<div>
<!--<span>{{my_name}}</span>-->
<h1> {{selector_condition_education}}</h1>
<h1>{{selector_condition_time}}</h1>
</div>
<tr>
<th>序号</th>
<th>职位</th>
<th>工资</th>
<th>学历</th>
</tr>
<!--<tr *ngFor="let info of select_position index as i"   
(click)="my_name=info?.name" >-->
<tr *ngFor="let info of select_position index as i" 
(click)="sendData(info?.name)" appMyStyle="blue">
<td>{{i}}</td>
<td>{{info?.name}}</td>
<td>{{info?.salary}}</td>
<td>{{info?.education}}</td>
 </tr>
</table>

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