angular4-属性型指令

angular中有三种类型的指令

• 组件－拥有模版的指令
• 结构型指令－通过添加或者移除DOM元素改变DOM布局的指令
• 属性型指令－改变元素，组件或者其他指令的外观和行为的指令

highlight指令

//highlight.directive.ts

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

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

export class HighlightDirective {
    @Input('appHighlight') highlightColor:string;

    @Input() defaultColor: string;

    constructor(private el: ElementRef) {}

    @HostListener('mouseenter') onMouseEnter(){
        this.highlight(this.highlightColor || this.defaultColor || 'red');
    }

    @HostListener('mouseleave') onMouseLeave(){
        this.highlight(null);
    }

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

指令宿主模版

    Green
    Yellow
    Cyan

Highlight me!

宿主组件

color = 'yellow';

解析：

• ElementRef 是一个服务，可以通过它的nativeElement属性直接访问DOM元素的能力，注入到指令构造器中，可以访问DOM结构
• Input将数据从绑定表达式传到指令中

公众号：前端咖秀