Angular 2 使用 setTimeout 更新 class

Question

我正在尝试向元素添加 class 并在一定时间后使用 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>

我可以看到该函数添加了 class 名称 'foobar'，但它永远存在。我期待这个函数在 1500 毫秒后删除新添加的内容。

请帮我解决这个问题。

Answer 1

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

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

Answer 2

<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 3

你的这一行 this.className = newClass this 指向组件但是 this 内部超时指向 window 使用 ES6 忽略这个

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

或将 this 的实例存储到 vm

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

两者都工作正常。

Answer 4

改成下面的代码就可以了。另外，有一个 plunker https://plnkr.co/edit/oEfZOW?p=preview 显示它正在工作

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

Angular 2 使用 setTimeout 更新 class

Angular 2 update class with setTimeout

ng-class

angular