2016-09-20 10 views
2

'setTimeout'関数内のコンポーネントの属性を変更すると、最初のページの読み込みでは機能しないようです。角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)にアップグレードしています。

これはなぜ起こりますか?最近のビルドで修正されていますか?

答えて

1

効果があります。私ははっきり

このplunkerを見てみましょう。.. RC5でエラーが発生した場合と言うカント: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を救うために持っていけません! thisの文脈は、function() {}の構文を使用している場合にのみ失われます。

+0

ああ、そうです。私は元々setTimeout()内にアニメーション状態を設定することに問題があり、setTimeout関数でデータバインディングで接続されたプロパティを設定するだけで簡単にしようとしました。 Unforunatelyでは、なぜsetTimeoutアニメーションの状態の変更がうまくいかなかったのか理解できませんでしたが、アニメーションをハードコーディングし、アニメーションの 'transition'に遅延プロパティを設定しました。そうすれば、必要に応じて状態を変更でき、setTimeout関数でラップしないことができます。それにもかかわらず、最短の解決策ではありませんでした。 – user3386826

+0

振り返ってみると、ngOnViewCheckedにあったはずのアニメーション状態の変更を 'ngOnInit'に入れていました... – user3386826

関連する問題