angular自定义指令Directive使用方法

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

2. 引入文件到模块

这里导入文件为：app.module.ts

import { AppHighlightDirective } from './highlight.directive.component';
declarations: [
    AppHighlightDirective
  ],

4. 使用

<div appHighlight>66666666666</div>