0

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    for(let i = 0; i < soletra.length; i++) {
      setTimeout(() => element.innerHTML += soletra[i], 75 * i);
   }
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)

// ATUALIZAÇÃO - Versão sem o RxJS //

TypeScript:

  export class Componente1Component implements OnInit {
        frase = '';
        ngOnInit() {

          const soletra = 'Oi tudo bem?'.split('').reverse();
          const soletrar = (a) => {
            this.frase += a;
            if (soletra.length > 0) {
              setTimeout(() => soletrar(soletra.pop()), 75)
            }
          }; 
}

HTML: nao alterei

<h3 id="nome"> {{ frase }} </h3>
2
  • Como já mencionei antes em outra pergunta feita por vc, quando faz ...innerHTML = "letra, 75 * posicao") vc simplesmente está inserido no elemento o texto letra, 75 * posicao, para realizar o cálculo utilize template string, o que tbm não sei se garantirá que vai funcionar, pois, me parece que o código não está correto!
    – LeAndrade
    13/02/2020 às 15:37
  • LeAndrade corrigi o for. Se eu faço algo como " <h3 id="nome"> Split: {{ TypeWriter() }} </h3>) " no HTML, o innerHTML funciona, mas de forma desordenada e infinita
    – WesLipe
    13/02/2020 às 15:56

1 Resposta 1

3

WesLipe, fiz alguns ajustes utilizando um pouco do RxJS. Veja abaixo o código:

Template

<div>{{frase}}</div>

Classe

import { Component, OnInit } from '@angular/core';
import { from, of } from 'rxjs';
import { delay, concatMap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  frase = '';
  ngOnInit() {
     const soletra = 'Oi tudo bem?'.split('');
     from(soletra)
      .pipe(
        concatMap(x => of(x).pipe(delay(75)))
      )
      .subscribe(a => {
       this.frase += a;
      });
   }
}

Resultado da execução do código acima

4
  • cara, funcionou! Muito obrigado. Terei que estudar sobre RxJS pq nao entendi nada do seu codigo kk, agradeço pela colaboração!
    – WesLipe
    13/02/2020 às 16:20
  • 1
    @WesLipe este trecho poderia ser escrito sem o RxJS. Ficaria assim: const soletra = 'Oi tudo bem?'.split('').reverse(); const soletrar = (a) => { this.frase += a; if (soletra.length > 0) { setTimeout(() => soletrar(soletra.pop()), 75) } }; 13/02/2020 às 16:36
  • Ola marcelo, obrigado pelo comentario. Tentei reproduzir a sua versão sem o RxJS e nao funcionou, se possivel, poderia me dizer o que fiz de errado? Adicionei na publicação :)
    – WesLipe
    18/02/2020 às 18:15
  • @WesLipe tudo bem? Adicione soletrar(soletra.pop()); na última linha do seu método ngOnInit, no exemplo que você colocou na publicação. Acredito que só faltou o "start" da função soletrar. 18/02/2020 às 19:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .