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事件中更改了颜色。您可以在the stackblitz

中看到两种解决方案的结果

如何更改上一个元素的样式值

1 个答案: