[Dúvida] routeReuseStrategy e onSameUrlNavigation deprecated

Olá Pablo, tudo bem?

Recomendamos sempre que acompanhe o curso na mesma versão que a pessoa instrutora para evitar incompatibilidades no código.

Caso você queira fazer o downgrade da versão, pode utilizar o seguinte comando no terminal:

npm uninstall -g @angular/cli

E em seguida, seguir os passos da atividade Preparando o ambiente disponível na primeira aula do curso, para utilizar a versão 14.

Mas, caso deseje desenvolver o projeto com a versão 15, vou te dar um passo a passo para refatorar o projeto e deixá-lo com o mesmo comportamento, mas sem os métodos “deprecated”, certo?

Vamos lá!

Agora, a nova estratégia recomendada para reutilização de rotas é o RouteReuseStrategy baseado em módulo. Para usá-lo, você precisará implementar sua própria estratégia de reutilização de rotas personalizada.

Passo 1

Remova as linhas contendo

this.router.onSameUrlNavigation = 'reload'

e

this.router.routeReuseStrategy.shouldReuseRoute = () => false

do método recarregarComponente

Passo 2

No arquivo app-routing.module.ts, modifique o array de imports:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
 })
export class AppRoutingModule { }

No exemplo acima, estamos usando a opção onSameUrlNavigation com o valor 'reload', o que fará com que o navegador recarregue a página quando a mesma URL for navegada novamente.

Passo 3

Crie um novo arquivo, que será uma classe; você pode nomeá-la como preferir. Neste exemplo, vou chamá-la de custom-reuse-estrategy.ts. Adicione o código a seguir:

import {ActivatedRouteSnapshot, BaseRouteReuseStrategy} from '@angular/router';

export class CustomReuseStrategy extends BaseRouteReuseStrategy {

  public override shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.data['reuseComponent'];
  }
}

O código apresentado define uma estratégia de reutilização de rotas personalizada CustomReuseStrategy, que estende a classe BaseRouteReuseStrategy do módulo @angular/router.

O método shouldReuseRoute é responsável por determinar se a rota atual pode ser reutilizada ou não.

Neste caso, a implementação personalizada verifica se a rota futura possui a propriedade reuseComponent definida no objeto data.

Se a propriedade estiver definida como true, a rota pode ser reutilizada. Caso contrário, a rota será tratada como uma nova rota e o componente correspondente será criado novamente.

Passo 4

Agora você precisa registrar a sua estratégia personalizada no módulo da sua aplicação, dentro do array de providers:

No arquivo app-routing.module.ts:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
  providers: [
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
  ],
 })
export class AppRoutingModule { }

Passo 5

Além disso, no arquivo app-routing.module.ts, na constante contendo as rotas da aplicação, adicione a propriedade data nos componentes que terão esse comportamento:

{
    path: 'listarPensamento',
    component: ListarPensamentoComponent,
    data: {
      reuseComponent: true
    }
  },

A propriedade data é um objeto que pode ser adicionado a uma rota específica no arquivo de definição de rotas do Angular. Ele pode ser usado para armazenar metadados personalizados associados a uma rota, que podem ser usados para tomar decisões personalizadas ao navegar para uma rota específica.

Passo 6

Importe a classe RouteReuseStrategy e também a classe que você criou no arquivo app-routing.module.ts

import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy } from './custom-reuse-strategy'

Agora,teste a aplicação para conferir se está funcionando como antes.

Espero ter ajudado e continuo à disposição!

Abraços, bons estudos!

Boa noite Nayanne Batista! Tudo bem? Para mim funcionou perfeitamente! Obrigado pela aula fora da aula :)

Olá Ismael, tudo bem!

Fico feliz que tenha conseguido aplicar os passos para refatorar e que tenha funcionado tudo certinho!

Muito obrigada pelo seu feedback! ;)