Estoy usando la biblioteca de animación de greensock para animar algunos componentes (como era de esperar). Tengo un problema cuando actualizo una variable en la función onComplete que está vinculada a un *ngIf . Por alguna razón, angular no detecta la actualización de la variable en la devolución de llamada.
1. click grey image. 2. pink image fades out 3. one of the grey images dissapears.Funcionalidad actual:
1. click grey image. 2. pink image fades out 3. (nothing happens) 4. click grey image - again. 5. one of the grey images dissapears.Tengo un plunkr para lo siguiente...
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; } } }; } Puede ver en la consola que la devolución de llamada se activa correctamente y actualiza la variable; sin embargo, el elemento que está vinculado a *ngIf no cambia hasta que hace clic en una de las imágenes grises por segunda vez .
¿Cómo hago para que esto se actualice según lo previsto en la devolución de llamada de onComplete ?
consulte esta documentación de Angular 2: Lifecycle Hooks
Según la documentación,
La regla de flujo de datos unidireccional de Angular prohíbe las actualizaciones de la vista después de que se haya compuesto. Ambos ganchos se activan después de que se haya compuesto la vista del componente.
Opción 1: use ngZone.run para notificar a angular que vuelva a renderizar la vista.
// import ngZone from @angular/core first. this.ngZone.run(() => { console.log("anim complete"); this.rightVisible = false; }); Opción 2: use ChangeDetector para permitir que angular reproduzca la vista nuevamente.
import {ChangeDetector} from '@angular/core'; this.rightVisible = false; this.cd.detectChanges();Consulte este plunker que contiene el bloque de código superior.