как изменить значение стиля предыдущего элемента

Question

у меня есть элементы, и когда щелкаешь мышью вниз, цвет текста меняется с черного на красный

Моя проблема в том, что я хочу, когда я щелкаю другой элемент, поэтому этот элемент меняется на красный, а предыдущий элемент становится черным

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

export class SelectDirective implements OnInit {

  constructor(private elRef: ElementRef, private renderer: Renderer2) {

  }
  ngOnInit() {
  }

  @HostListener('mousedown') onmousedown() {
    if (this.elRef.nativeElement.style.color !== 'red') {
      this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red');

    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'color', 'black');
    }

Answer 1

Использование директивы для изменения стиля - использование кувалды, чтобы расколоть орех. Но вы можете добавить вывод в вашу директиву.

В общем, без директивы, мы можем сделать что-то вроде

<div *ngFor="let item of [0,1,2,3,4];let i=index" 
    [style.color]="selectedIndex==i?'red':'black'" 
    (click)="selectedIndex=i" >
    click me
</div>

когда мы определили переменную типа

  selectedIndex:number=-1;

Если вы хотите использовать директиву, мы можем сделать нечто подобное. Мы определили переменную как

  control:any={}

И мы пишем что-то вроде

<div *ngFor="let item of [0,1,2,3,4]"
     [appSelect]="control" 
     (onSelect)="control=$event" >
    click me
</div>

Где наша директива

export class SelectDirective implements AfterViewChecked {

  @Input('appSelect') control;
  @Output() onSelect:EventEmitter<any> = new EventEmitter<any>();

  constructor(private elRef: ElementRef, private renderer: Renderer2) {

  }
  ngAfterViewChecked() {
    if (this.elRef.nativeElement==this.control)
      this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red');
    else 
      this.renderer.setStyle(this.elRef.nativeElement, 'color', 'black');
  }

  @HostListener('mousedown') onmousedown() {
    this.onSelect.emit(this.elRef.nativeElement);

  }
}

Обратите внимание, что мы меняем цвет в событии AfterViewChecked. Вы можете увидеть результат обоих решений в стеке стека