Question

我正在使用 greensock动画库来动画一些组件（正如您所期望的那样）。当我更新绑定到onComplete的{{1}}函数中的变量时，我遇到了问题。出于某种原因，angular不会检测回调中变量的更新。

<小时/> 预期功能：

*ngIf

当前功能：

1. click grey image.
2. pink image fades out
3. one of the grey images dissapears.

我有以下plunkr ......

1. click grey image.
2. pink image fades out
3. (nothing happens)
4. click grey image - again.
5. one of the grey images dissapears.

您可以在控制台中看到回调成功触发并更新变量，但绑定到declare var TweenMax; // defined in index.html @Component({ selector: 'my-app', template: ` <img *ngIf="leftVisible" src="http://placehold.it/350x150" (click)="animate(-1)"/> <img *ngIf="rightVisible" src="http://placehold.it/350x150" (click)="animate(1)"/> <img #otherImage src="http://placehold.it/350x150/ff00ff/000000"/> `, }) export class App { @ViewChild('otherImage') otherImageElement; private leftVisible: boolean; private rightVisible: boolean; constructor() { this.leftVisible = this.rightVisible = true; } private animate(_direction: number){ var tween = TweenMax.to(this.otherImageElement.nativeElement, 1, { opacity: 0, onComplete: () => { console.log("anim complete"); this.rightVisible = false; } } }; }的元素不会更改，直到您再次单击其中一个灰色图像< / strong>即可。

如何在*ngIf回调中按预期更新？

Answer 1

请参阅此Angular 2文档：Lifecycle Hooks

根据文件，

Angular的单向数据流规则禁止在编写视图后对视图进行更新。组件的视图组合后，这两个钩子都会触发。

选项1：使用ngZone.run通知角度再次渲染视图。

// import ngZone from @angular/core first.
this.ngZone.run(() => {
  console.log("anim complete");
  this.rightVisible = false;
});

选项2：使用ChangeDetector让angular再次渲染视图。

import {ChangeDetector} from '@angular/core';

this.rightVisible = false;
this.cd.detectChanges();

请参阅包含高位代码块的plunker。

ng如果没有检测到var变化

1 个答案: