更改后将颜色值重置为默认值 - 角度5

Question

我正在设计样式化在ul / li表（物化css）中格式化的链接。

    <ul id="slide-out" class="side-nav fixed"  >
  <li >
    <a class="link-text-1" appHighlight>
      <span>Parent-alone</span>
    </a>
  </li>
  <li >
    <a class="link-text-2" appHighlight>
      <span>Parent</span>
    </a>
    <ul id="inner" class="inner"  >
      <li >
        <a class="child-link-1" appHighlight>
          <span>Child-1</span>
        </a>
      </li>
      <li >
        <a class="child-link-2" appHighlight>
          <span >Child-2</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

我想为每个点击的链接文字添加更改颜色。当单击链接（活动）时，未单击的所有内容都应具有默认颜色（因此之前单击的应重置为默认值）。我需要使用Angular 5指令，我不知道如何重置未点击链接的状态。是否有任何Angular 5方法可以做到这一点？

我的指示：

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

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

  constructor(private el: ElementRef) { }

  @HostListener('click') clickedLink() {
    this.highlight('red');
  }

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

}