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
的功能。