1

Tengo un pequeño problema con una función que muestra un pequeño texto de bienvenido al inicio de una página. El problema es el siguiente: al cargar la página el mensaje se muestra con total normalidad con un efecto de máquina de escribir pero cuándo cambio de vista, por ejemplo, si hago click en la sección habilidades o contacto y luego hago click de nuevo en la sección inicio el mensaje se muestra de forma totalmente desordenada. Mi lógica me dice que es que la función se sigue ejecutando al salir la vista Inicio y cuándo vuelvo a ella se muestra de esa forma porque no comienza desde cero a ejecutarse (NO SE SI ESTÉ CLARO EN ESO) pero no se me ocurre algo con lo que pueda solventar el problema. A continuación les muestro la vista #1 cuándo cargo la página por primera vez y luego la vista #2 que es cuándo hago click en otra sección y vuelvo nuevamente a la sección Inicio que es cuándo sucede el desorden. También adjunto el código de esta componente para que le echen una ojeada. Gracias a todos de antemano.

Vista #1 (Al cargar la página por primera vez)

Vista #2 (Al hacer click en Habilidades>Inicio o Contacto>Inicio)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})

export class BodyComponent{

  public palabra:string;
  public nombre:string ="";

  constructor() {
    this.palabra ="";
  }

  ngOnInit(){
      let palabra:string = "Bienvenido";
      let array:string[] = palabra.split('') ; 
      let i=0;
      let imprimir = setInterval(function repetir(){
        if(array[i] != ""){
          document.getElementById('texto').innerHTML += array[i];
        }
        i++;
        if(i === array.length+1){
          i=0;
          document.getElementById('texto').innerHTML="";
        }
      },600);
    };
    
};
#imagen {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1;
}

#contenedor-img{
    position: fixed;
    width: 100%;
    height: 100%;
}

#texto{
    z-index: 20;
    font-size: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
<div class="d-flex align-items-center" id="contenedor-img"> 
  <img src="\assets\img\image.jpg" class="img-fluid" alt="Imágen responsive" id="imagen">

  
  <div class="col-12 col-md-12 col-sm-12 d-flex justify-content-center" id="texto"></div>
  

</div>





 

1 respuesta 1

1

Veo varias cosas que pueden estar fallando:

  • No cancelas nunca el interval.

    Como comentas, haces un setInterval y nunca haces un clearInterval

  • Estás accediendo directamente al DOM con document.getElementById

    Trabajando con Angular no es aconsejable hacer las cosas de este modo. De hecho, casi te puedes olvidar que existe el DOM cuando trabajas con Angular (hay excepciones, claro) porque significa que tanto tú como Angular estás modificando a la vez los componentes visibles, y la coordinación es complicada.

Te presento un ejemplo que soluciona esto:

Componente

import { Component, OnInit, Input, OnChanges, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-typewriter',
  templateUrl: './typewriter.component.html',
  styleUrls: ['./typewriter.component.css']
})
export class TypewriterComponent implements OnInit, OnChanges, OnDestroy {

  @Input() textToShow: string;
  currentText = '';
  interval: any;

  constructor() { }

  ngOnInit() {

  }

  ngOnChanges() {
    this.currentText = '';
    if (this.interval) {
      clearInterval(this.interval);
    }
    if (this.textToShow) {
      this.interval = setInterval(() => {
        this.currentText += this.textToShow.charAt(this.currentText.length);
        if (this.currentText.length === this.textToShow.length) {
          setTimeout(()=>this.currentText='',250)
        }
      }, 300);
    }
  }
  ngOnDestroy() {
    clearInterval(this.interval);
  }

}

Plantilla (template):

<p>{{currentText}}_</p>

Y aquí tienes una demo funcionando

4
  • Hola Pablo. Muy buena tu respuesta. Estoy comenzando con Angular y estaba siguiendo un curso que descargué pero explican muy por encima, tuve que leerme la documentación de Angular aunque aún hay muchas cosas que no entiendo en tu código a pesar de que he leído de diferentes fuentes para intentar comprender. 1) entiendo que usas @input para pasar el texto de la componente App a Typewriter, solo esa es su función? además tengo dudas sobre los cliclos de vida, cuál sería la diferencia entre colocar el código en ngOnInit() en vez de colocarlo en ngOnChanges()? espero puedas ayudarme y disculpa.
    – JulianProg
    Commented el 16 dic. 2018 a las 21:01
  • Eso da para un par de preguntas. Puedes hacerlas o puedes pasarte por el chat y te ayudaremos en lo posible Commented el 16 dic. 2018 a las 21:39
  • Disculpa, a cuál chat te refieres? dónde lo ubico? quisiera poder aclarar esas dudas.
    – JulianProg
    Commented el 16 dic. 2018 a las 22:25
  • A este chat Commented el 17 dic. 2018 a las 8:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.