Angular LAB: Preserving Component State Across Route Transitions

The article explains that navigating away from a route can make Angular fetch data again and also discard DOM state, which is especially troublesome for forms and other UI elements. It proposes a custom RouteReuseStrategy to keep components cached when leaving a route and restore them later, while using route data flags to control reuse and avoid sharing state between parameterized routes.

Fichamento

#

• Mostra dois problemas ao trocar de rota: refazer requisições e perder estado de DOM.
• Propõe RouteReuseStrategy para guardar componentes em vez de destruí-los ao sair da rota.
• Usa storeRoute: true para rotas que devem ser preservadas e noReuse: true para impedir reaproveitamento em rotas com parâmetros.
• Cria helpers para montar o caminho completo da rota e comparar objetos como params e queryParams.
• Implementa um cache de rotas com DetachedRouteHandle e métodos shouldDetach, store, shouldAttach, retrieve e shouldReuseRoute.
• Inclui métodos para limpar uma rota ou limpar tudo, porque componentes em cache não passam por ngOnInit de novo e podem gerar memory leaks.
• O resultado mantém o estado ao voltar para a rota e permite uso manual do cache quando necessário.