Question

我试图根据5秒后的方法计算来更改某些元素的类：

<tr *ngFor="let row of items; let i = index">
   ...
   <td #f [ngClass]="getColor(row, f)">Test 1</td>
   <td #f2 [ngClass]="getColor(row, f2)">Test 2</td>
   ...
</tr>

在组件内部

getColor(row: any, f: any): string {
    //I need to add a class based on some calculation
    this.setClass(f)
    return "aaa"; //set the aaa class
}

setClass(el: any) {
    setTimeout(() => {
         //remove the aaa class after 5 seconds
        //this.renderer.removeClass(el.nativeElement, 'aaa');
    }, 5000);
}

问题在于 el.nativeElement 是“未定义”的，我认为这是因为el类型是HTMLElement而不是ElementRef。

我也检查了类似的问题，例如https://stackoverflow.com/a/48700662/1395614，但实际上问题仍然存在。

Answer 1

el已经是HTMLElement，因此您应该传递el而不是el.nativeElement。

顺便说一下，nativeElement中的ElementRef是HTMLElement类的实例

Answer 2

您应该使用@HarunYılmaz指出的自定义指令。为了重用您的代码并从组件中消除不必要的复杂性。

这里是一个示例：https://stackblitz.com/edit/angular-x6kbus

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

@Directive({
  selector: '[changeClass]'
})
export class ChangeClassDirective implements OnInit {

  @Input('changeClass') changeClass: string;

  constructor(private renderer: Renderer2,
    private elementRef: ElementRef) {  }

  ngOnInit() {
    this.setAndRemoveClass(this.changeClass)
  }

  setAndRemoveClass(className: string) {
    this.renderer.addClass(this.elementRef.nativeElement, className);
    setTimeout(() => {
      //remove the aaa class after 5 seconds
      this.renderer.removeClass(this.elementRef.nativeElement, className);
    }, 5000);
  }
}

像这样使用它：

<p changeClass="test">
  Start editing to see some magic happen :)
</p>

Answer 3

从所有同级元素中删除类。

<li #li class="cat" *ngFor="let category of categories;">

component.ts

@ViewChildren('li') livs: QueryList<any>;

constructor(private elementRef: ElementRef) { }

sortNewsItems(event) {
    this.livs.forEach(liv => liv.nativeElement.children[0].classList = []);
}

我希望这会有所帮助。

在5秒钟后使用Angular 2+中的方法更改元素的类

3 个答案: