Angular 2更新类与setTimeout[duplicate]

Question

我试图添加一个类到一个元素，并删除它在一定时间后使用setTimeout。

组成部分

export class setClass implements OnInit {
  className: string = ''

  setClassName(newClass) {
    this.className = newClass

    setTimeout(function () {
      this.className = ''
    }, 1500)
  }

  constructor() { }

  ngOnInit() {
  }
}

模板

<div>
    <img src="img/1.png" alt="" [ngClass]="className">
    <button (click)="setClassName('foobar')">Set new class</button>
</div>

我可以看到该函数添加了类名“foobar”，但它将永远保留。我希望这个函数在1500ms后删除新添加的。

请帮我修一下。

Answer 1

<div>
    <img src="img/1.png" #image alt="">
    <button (click)="setClassName('foobar')">Set new class</button>
</div>

export class setClass implements OnInit {
  className: string = ''
  @ViewChild("image") image ;
  setClassName(newClass) {
    this.image.nativeElement.classList.add(newClass)
    let self = this;
    setTimeout(function () {
      self.image.nativeElement.classList.remove(newClass)
    }, 1500)
  }

  constructor() { }

  ngOnInit() {
  }
}

Answer 2

'this'没有在超时函数中定义，因为函数范围的原因，您将无法使用它。您可以使用这样的箭头函数：

setTimeout(()=> {
      this.className = ''
    }, 1500)

Answer 3

您的此行this.className=newClass此this指向组件，但this内部超时指向窗口使用ES6忽略此项

setTimeout(() => {
  this.className = "";
}, 1500);

或将this的实例存储到vm

let vm = this;
setTimeout(function() => {
  vm.className = '';
}, 1500);

两者都很好。