Angular 2數據綁定和setTimeout

看起來，在'setTimeout'函數中更改組件的屬性在初始頁面加載時不起作用。Angular 2數據綁定和setTimeout

比方說，我有一個屬性的組件「HomeComponent」：

isValueTrue: boolean = false;

如果我使用數據綁定應用此屬性的HTML元素：

<div [class.myClass]="isValueTrue"></div>

，並設置值我ngOnInit（）類似：

this.isValueTrue = true;

它的工作原理！

但是，如果我申請這樣說：

let comp = this; 
setTimeout(() => comp.isValueTrue = true, 1000);

它不會讓初始頁面加載設置。然而，它會在後續的頁面訪問中工作，但不會在硬刷新之後。

我不知道爲什麼這不起作用，但我希望這是在最近的版本中修復的東西。我的項目目前正在使用RC 5，所以我現在升級到2.0.0（2016-09-14）。

任何想法，爲什麼會發生這種情況？它在最近的版本中修復了嗎？

來源

2016-09-20 user3386826

它正在工作。我不能說清楚，如果有在RC5的錯誤..

在這個plunker請看下圖：https://plnkr.co/edit/KOmn62IJJyr2jzt6hYh1?p=preview

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 [class.red]="useRed">Hello {{name}}</h2> 
    </div> 
    `, 
    styles: [ 
    '.red { color: red; }' 
    ] 
}) 
export class App { 

    useRed = false; 

    constructor() { 
    this.name = 'Angular2' 
    } 

    ngOnInit() { 
    setTimeout(() => this.useRed = true, 1000); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

如果你正在使用此() =>語法，你沒有保存this！只有在使用function() {}語法時，this上下文才會丟失。

來源

2016-09-21 04:22:09 mxii

啊，你說得對，這確實有用。我最初在設置setTimeout（）中的動畫狀態時遇到了問題，並嘗試將其簡化爲僅設置通過setTimeout函數中的數據綁定連接的任何屬性。不幸的是，我無法弄清楚爲什麼setTimeout動畫狀態更改無法正常工作，但我最終難以在動畫的「過渡」中設置動畫並設置延遲屬性。這樣我可以在需要時更改狀態，而不是包裝在setTimeout函數中。不是最短的解決方案，而是一個體面的解決方法。 – user3386826

回想起來，當他們應該在'ngOnViewChecked'中時，我將動畫狀態更改置於'ngOnInit'中... – user3386826

Angular 2數據綁定和setTimeout

回答

相關問題