Tengo una serie de palabras y mi objetivo es mostrar cada una de ellas en una plantilla HTML cada pocos segundos. El resultado debería ser algo como esto: https://bootstrapmade.com/demo/iPortfolio/
Sé que es posible hacerlo usando el siguiente código JavaScript:
const typed = select('.typed') if (typed) { let typed_strings = typed.getAttribute('data-typed-items') typed_strings = typed_strings.split(',') new Typed('.typed', { strings: typed_strings, loop: true, typeSpeed: 100, backSpeed: 50, backDelay: 2000 }); }Traté de replicar el mismo efecto usando mecanografiado y en su lugar escribí el siguiente código:
export class HeroComponent implements OnInit { words: string[] = ['marco', 'polo']; word: string = ""; constructor() { } ngOnInit(): void { setTimeout(() => { while(true){ for (let i=0; i < this.words.length; i++) { setTimeout(() => { this.word = this.words[i]; console.log(this.word) }, 4000) }; }}, 4000); } }Sin embargo, una vez que ejecuto el sitio web, dice que se quedó sin memoria.
¿Sería capaz de sugerir una forma inteligente y elegante de lograr el efecto vinculado en el sitio web anterior?
Esta sería la forma de hacerlo:
import { map, timer } from 'rxjs'; @Component({ ... }) export class HeroComponent { words = ['marco', 'polo']; word = timer(0, 4000).pipe( map((num) => { const index = num % this.words.length; const word = this.words[index]; console.log(word); return word; }) ); }Luego use la tubería asíncrona en html:
<p>{{ word | async }}</p>Ejemplo: https://stackblitz.com/edit/angular-ivy-7xbuft?file=src/app/app.component.ts
El timer de RxJS emite números enteros en orden creciente (0, 1, 2, 3, ...) comenzando en el primer parámetro (0ms) y luego una vez cada intervalo dado por el segundo parámetro (4000ms).
pipe nos permite realizar una serie de acciones sobre cualquier valor emitido antes de regresar.
map toma el valor emitido y devuelve un valor diferente, en este caso usamos el número entero para calcular el índice de la matriz, luego devolvemos la palabra en ese índice.
La canalización async se suscribirá al observable y cancelará la suscripción cuando se destruya el componente, deteniendo la ejecución. Darse de baja es importante para evitar pérdidas de memoria.