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

回答

相关问题