Как сделать так, чтобы директива атрибута Angular применялась только к одному элементу DOM одновременно

Question

У меня есть следующая директива атрибута Angular , которая переключает css class .highlighted к своему хосту при событии щелчка.

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

@Directive({
  selector: '[highlighted]'
})
export class HighlightedDirective {

  @Input('highlighted') isHighlighted = false;

  constructor() {
  }

  @HostBinding('class.highlighted')
  get cssClasses() {
    return this.isHighlighted;
  }

  @HostListener('click')
  toggle() {
    this.isHighlighted = !this.isHighlighted;
  }

}

И применяется к каждый div в * ngFor:

 <div *ngFor="let row of rows" highlighted>
    row
 </div>

Класс css присоединен и удален правильно, но одновременно можно выделить несколько элементов div.

Учитывая, что один существующий элемент div с классом .highlighted уже присоединен к нему, при нажатии внутри другого элемента div выделенная директива должна быть удалена из первого div и прикрепленный к последний нажал один ТОЛЬКО . Есть предложения?

Answer 1

Вы можете переключать или очищать в зависимости от цели события. Пожалуйста, проверьте ниже код:

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

@Directive({
  selector: '[highlighted]'
})
export class HighlightedDirective {

constructor(private _elementRef : ElementRef) { }
  @Input('highlighted') isHighlighted = false;


  @HostBinding('class.highlighted')
  get cssClasses() {
    return this.isHighlighted;
  }

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
      if (clickedInside) {
          this.isHighlighted = !this.isHighlighted 
       }
      else{
        this.isHighlighted =false;
      }
  }

}