帶有setTimeout的Angular 2更新類

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

由於函數作用域，'this'未在您的超時函數中定義，您將無法使用它。您可以使用箭頭功能是這樣的：

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

將其更改爲下面的代碼，它將工作。此外，有一個plunker https://plnkr.co/edit/oEfZOW?p=preview，顯示它的工作

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