markdown Criando uma diretiva：输入e属性绑定

Posted 2021-05-06

# Criando uma diretiva: Input e Property Binding

```HTML
<p highlight [defaultColor]="'grey'" [highlightColor]="'red'">
    Texto com highlight com cores customizadas.
</p>
```

```typescript
@import { Directive, HostListener, HostBinding, Input } from '@angular/core';

@Directive({
    selector: '[highlight]'
})
export class HighlightDirective {

    @HostListener('mouseenter') onMouseOver(){
        this.backgroundColor = this.highlightColor;
    }

    @HostListener('mouseleave') onMouseLeave(){
        this.backgroundColor = this.defaultColor;
    }

    @HostBinding('style.backgroundColor') background: string;

    // Variáveis para cores dinâmicas
    @Input() defaultColor: string = 'white';
    @Input() highlightColor: string = 'yellow';

    constructor() {}

}
```