2

Olá. Utilizo a versão 8.1.3 do Angular no meu projeto e estou tendo uns problemas para criar um efeito de âncora no card de produto que é carregado dinamicamente na tela. Tentei utilizando o velho html com href apontando para o ID do produto, mas sem sucesso. Tentei também uma ou outra biblioteca pronta para fazer utilizar de outras maneiras o scrollTo() mas também sem sucesso. Alguém já fez algo parecido ou tem ideia de como fazer isso em um SPA?

<app-card-produto *ngFor="let p of e.produtos"[produto]="p"">
</app-card-produto>

Esse é o card que possuo na minha tela de catálogo. O comportamento que preciso é entrar na tela de detalhe do produto, mas que ao voltar, a página role até o card que possua o ID (ou outro identificador que seja necessário) o qual acessei por último. A parte boa disso é que ao voltar da tela de detalhe, já tenho a consulta da API pronta, ou seja, os cards só precisam ser renderizados, já tenho toda a lista de produtos salva no IndexedDB.

Estou fugindo totalmente sobre usar jquery, creio que deve haver uma solução para isso sem precisar dele, mas em um caso extremo posso me render quanto a isso.

1 Resposta 1

0

Consegui resolver o problema, necessitando agora apenas de ajustes para deixar 100%.

No ngOnInit da tela de catálogo, adicionei o seguinte:

window.addEventListener("scroll", this.scroll, true);

Isto adiciona a assinatura no evento do scroll, executando a função scroll (this.scroll) a cada alteração no valor do mesmo.

A função ficou assim:

scroll = (event: any): void => {
    this.scrollNumber = event.srcElement.scrollTop;
    // console.log(event);
    // console.log("posição " + this.scrollNumber);
};

Como o meu comportamento de acessar a tela de detalhe do produto era disparado pelo método dentro do card, passei o valor do scrollNumber salvo na função para o card por parâmetro.

<app-card-produto *ngFor="let p of e.produtos" [produto]="p"
    [scrollPosition]="scrollNumber">
</app-card-produto>

No método que redireciona para a tela de detalhe passando todos parâmetros irrelevantes aqui, eu salvo o valor do scroll na SessionStorage da seguinte maneira:

let scroll = this.scrollPosition;
sessionStorage.setItem("scrollPosition", JSON.stringify(scroll));

Feito isso, ao voltar para a tela de catálogo, eu crio um método para fazer a leitura dessa variável na sessão e setar o valor dela ao scroll da página. No ngOnInit eu chamo o método this.recoverScroll();. E no método eu tenho o seguinte:

recoverScroll() {
    let scrollSaved = JSON.parse(sessionStorage.getItem("scrollPosition"));
    setTimeout(() => {
        document.getElementsByClassName(
            "ng-scroll-viewport"
        )[0].scrollTop = scrollSaved;
    }, 10);

    //reset scroll
    sessionStorage.setItem("scrollPosition", JSON.stringify(0));
}

Para garantir que o acesso por nenhuma outra rota diferente da DetalhePage -> CatálogoPage acabe rolando para um produto que não faz sentido no contexto, ao fim do método eu zero a variável da sessão.

Conclusão: talvez não seja uma das melhores práticas setar o valor usando o 'ng-scroll-viewport', mas não consegui utilizando nenhuma outra forma que encontrei pelos fóruns. Só preciso agora adicionar uma animação para deixar o scroll suave. Já vi que nesse caso não será possível através do CSS, mas assim que eu resolver atualizo a resposta.

Comecei há pouco a trabalhar com programação e menos ainda com Angular, então com certeza deve haver uma maneira mais otimizada de fazer isso, mas espero de qualquer forma ter ajudado!

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 .