Angular 属性型指令 directive

1.使用命令创建指令    ng  g  d  yourDirectiveName

2.yourDirectiveName.directive.ts代码:

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

@Directive({
   selector:'[appHighlight]' 
})

export class HighlightDirective {
  constructor(private el:ElementRef){//此时的el为调用该指令的DOM元素
  }  
   @Input() defualtColor:string;
   @Input('appHighlight') color:string; 
}

private highlight(color:string){
  this.el.nativeElement.style.backgroundColor = color;
}

@HostListener('mouseenter') onMouseEnter{
  this.highlight(this.color||this.defualtColor||'red');
}

3. 使用指定的html:

A.

<div appHighlight defualtColor=" red "></div>
<div appHighlight [defaultColor] =" 'red' "></div>

以上的两种写法等效,能够把 red 传入指令的defaultColor变量 中   

B.

<div    appHighlight="red" ></div>
<div    [appHighlight]=" 'red' " ></div>

以上两种写法等效，能够把red传入指令的color变量中

C.错误写法

<div appHighlight color="red"></div>
<div appHighlight [color]="'red'"></div>

第一种写法并不会把red传入color中，因为 @Input( name1 ) color:string;  这里的变量name1 重新定义了 color的接口形式，即变量color给外部的接口是name1，这种写法不会报错，因为这个是attribute的写法

第二种写法会直接报错：Can't bind color since it isn't a known property...  

 

你的指令没生效？

你记着设置@NgModule的declarations数组了吗？它很容易被忘掉。

打开浏览器调试工具的控制台，会看到像这样的错误信息：

EXCEPTION: Template parse errors:
  Can't bind to 'appHighlight' since it isn't a known property of 'div'.

Angular 检测到你正在尝试绑定到某些东西，但它不认识。所以它在declarations元数据数组中查找。 把HighlightDirective列在元数据的这个数组中，Angular 就会检查对应的导入语句，从而找到highlight.directive.ts，并了解appHighlight的功能。