angular自定义指令Directive
1.第一种Directive不传参数
1.创建Directive ts文件:highlight.directive.component.ts
Directive,ElementRef 引用2个属性
import { Directive,ElementRef} from '@angular/core'
@Directive({
selector:'[appHighlight]' // []设置为属性 .appHighlight设置为类
})
export class AppHighlightDirective {
// 注入ElementRef对象
constructor(private el:ElementRef){
// el.nativeElement 就是DOM节点
el.nativeElement.style.background = 'yellow'
}
}
- 引入文件到模块
这里导入文件为:app.module.ts
import { AppHighlightDirective } from './highlight.directive.component';
declarations: [
AppHighlightDirective
],
- 使用
<div appHighlight>66666666666</div>