Angular 2数据绑定和setTimeout

Question

看起来在“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）。

有任何想法为什么会这样吗？最近的版本是否已经修复了这个问题？

- user3386826

Answer 1

它正在工作。我不能确定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 上下文。

- slaesh

---

啊，你说得对，这确实有效。我最初在setTimeout()内设置动画状态时遇到了问题，尝试简化为在setTimeout函数中设置任何通过数据绑定连接的属性。不幸的是，我无法弄清楚为什么setTimeout动画状态更改不起作用，但最终我硬编码了动画并在动画的“过渡”中设置了延迟属性。这样我就可以在需要时更改状态，而不是包含在setTimeout函数中。虽然不是最短的解决方案，但仍然是一个不错的解决方法。 - user3386826

回想起来，我把动画状态的更改放在了“ngOnInit”中，但它们应该放在“ngOnViewChecked”中... - user3386826

Answer 2

实际上你可以这样做，并且在Angular 9中有效

this.isValueTrue = true;
window.setTimeout(()=>{
this.isValueTrue = false}, 3000)

- SARAN SURYA