Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como salvar o estado da tela e evitar novas requisições ao mudar de tela?

Estou usando a Memoteca como referência num projeto local. Estou criando um componente para representar cada tela e subtela e usando rotas para gerenciar o acesso. Estou com duas dúvidas.

Primeiro, na tela de lista de pensamentos (componente app-listar-pensamento), quando clico para editar um pensamento, entrando em editar-pensamento, ele passa o id e busca o pensamento do servidor novamente. Como faria para passar o pensamento inteiro como parâmetro em vez de buscar o mesmo novamente?

Segundo, quando volto para a lista, o ngOnInit de app-listar-pensamento é chamado de novo fazendo a mesma busca por pensamentos novamente. Se o campo de pesquisa estiver preenchido, o texto é perdido. O mesmo ocorre se estiver selecionando favoritos. Como faria para salvar a lista de pensamentos e o campos de pesquisa e evitar novas buscas quando voltar para essa tela?

2 respostas
solução!

Teo! Vc pode passar o pensamento como parametro!

Em vez de passar só o id e buscar o pensamento de novo, manda o pensamento inteiro como parâmetro na navegação. Na hora de chamar a tela de editar-pensamento, faz algo assim:

// No componente app-listar-pensamento
editarPensamento(pensamento: Pensamento) {
  this.router.navigate(['/editar-pensamento', { pensamento: JSON.stringify(pensamento) }]);
}

E na tela de editar-pensamento, pega o parâmetro assim:

// No componente editar-pensamento
ngOnInit() {
  const pensamento = JSON.parse(this.route.snapshot.paramMap.get('pensamento'));
  // Agora você tem o pensamento inteiro, sem precisar buscar de novo
}

Pra Salvar a lista de pensamentos e o campo de pesquisa, vc pode usar algum serviço ou o localStorage pra salvar esses dados antes de sair da tela de listar pensamentos. No ngOnInit, antes de fazer a busca, verifica se já tem esses dados salvos

// No componente app-listar-pensamento
ngOnInit() {
  const listaSalva = this.meuServico.getListaSalva(); // Aqui você implementa essa função no seu serviço

  if (listaSalva) {
    this.listaDePensamentos = listaSalva.lista;
    this.campoDePesquisa = listaSalva.pesquisa;
  } else {
    this.buscarPensamentos(); // Só busca se não tiver nada salvo
  }
}

E não esquece de salvar esses dados antes de sair da tela:

// No componente app-listar-pensamento
ngOnDestroy() {
  this.meuServico.salvarLista(this.listaDePensamentos, this.campoDePesquisa); // Implementa essa função no serviço também
}

Aí, com essas mudanças, não vai mais perder os dados quando voltar pra lista. Qualquer coisa manda mesangem lá no discord da Alura que podemos até ir call! :D

Abs.

Funcionou. Obrigado.