Question

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

@Directive({

  selector: '[myHighlighter]'
})
export class Highlight {

  constructor(private el: ElementRef) { }


  @Input('myHighlighter') 
  highlightColor: string;


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


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

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

如何更改上面的指令，以便用户可以动态更改字体和突出显示颜色？我想输入是用户输入所需颜色的最佳方法，但我不确定语法。

Answer 1

您已经创建了高亮指令，如果要传递动态数据，则只需将其作为输入传递。

ex：

<input type="text" #color ngModel /> . <!-- use the color reference to pass to directive -->

<div [myHighlighter]="color.value"> Some text to highlight </div>

类似地，您可以实现字体大小。

此处正在演示-https://stackblitz.com/edit/angular-rzikhx

如何动态更改字体/背景的颜色

1 个答案: