Tengo un componente principal donde obtengo los datos de BE y donde paso los datos al componente secundario:
<app-team-tile [teamData]="team" (openNotes)="openNotes($event)"></app-team-tile>teamData representa una colección de miembros del equipo. En el componente teamTile, paso los datos al siguiente componente secundario:
<app-team-firefighter [firefighter]="firefighter" [longestAlarm]="getTheLongestFirefighterAlarm(firefighter)" ></app-team-firefighter>la alarma más larga es un método que devuelve una alarma al componente secundario. En el componente app-team-firefighter tengo un temporizador en el método ngOnChanges:
ngOnChanges(): void { if (this.longestAlarm) { interval(1000).pipe( map((count: any) => this.format(count + this.longestAlarm.duration)) ).subscribe((time: string) => { this.timer = time; }); } } En la plantilla, muestro el valor this.timer , pero parpadea cada 5 segundos porque obtengo datos de BE cada 5 segundos, y sé que cuando obtengo datos de BE en el padre, el hijo los destruye. ¿Qué puedo hacer para eliminar este parpadeo? ¡Gracias por adelantado!
¿Por qué está haciendo esto en ngOnChanges -> este gancho de ciclo de vida se llama cada vez que cambia un valor de entrada? Pero no está utilizando estos valores de cambio, por lo que debe mover su suscripción a ngOnInit .
Si cambia sus entradas cada 5 segundos, ¡está creando una nueva suscripción cada vez que se ejecuta el método! (probablemente causando su parpadeo). Tampoco los está limpiando por lo que puedo ver, por lo que solo está haciendo suscripciones duplicadas cada 5 segundos, lo que provocará una pérdida de memoria.
¡Querrás darte de baja! (No he incluido esto a continuación)
ngOnInit() { interval(1000).pipe( filter(_ => !!this.longestAlarm), map((count: any) => this.format(count + this.longestAlarm.duration)) ).subscribe((time: string) => { this.timer = time; }); }