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

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

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

或将this的实例存储到vm

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

两者都运转正常。

Answer 2

＆＃39;这＆＃39;由于函数范围而未在超时函数中定义，因此您无法使用它。你可以使用这样的箭头函数：

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

Answer 3

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

将其更改为下面的代码，它将起作用。此外，还有一个可以显示正常工作的傻瓜https://plnkr.co/edit/oEfZOW?p=preview

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

带有setTimeout的Angular 2更新类

4 个答案: