1
resposta

Qual o intuito de fazer um subscribe no params do ActivatedRoutes?

Boa noite. Não entendi qual o intuito de fazer um subscribe no params do serviço ActivatedRoute, é realmente necessário?

this.activatedRoute.params.subscribe((param) => {
      this.animais = this.activatedRoute.snapshot.data['animais']
    })

Ao fazer um console.log da variável param recebida no subscribe, se trata de um objeto vazio e se apenas atribuirmos a propriedade animais ao atributo animais, sem fazer o subscribe no params, o mesmo resultado é obtido

1 resposta

Oi Marcos, tudo bem?

Desculpe a demora em retornar.

O ActivatedRoute é uma classe que representa a rota ativa na aplicação Angular. Ele fornece acesso aos parâmetros da rota, bem como aos dados que podem ser pré-carregados por meio de um resolver. Ao fazer o subscribe no params do ActivatedRoute, você está observando as mudanças nos parâmetros da rota.

Digamos que você tenha uma rota como esta:

{ path: 'animais/:id', component: AnimalComponent }

Quando o usuário acessa a rota /animais/1, o ActivatedRoute contém o valor 1 como parâmetro id. Se o usuário clicar em um link para acessar /animais/2, o ActivatedRoute atualiza o parâmetro id para 2. Fazendo o subscribe no params, você pode receber essas atualizações e agir de acordo com elas.

No seu exemplo de código, você está usando snapshot.data para acessar dados pré-carregados pelo resolver e atribuí-los ao atributo animais. No entanto, se os parâmetros da rota mudarem sem que a página seja atualizada, o snapshot não será atualizado. Usando o subscribe no params, você pode garantir que seu componente receba as atualizações dos parâmetros da rota, mesmo que a página não seja atualizada.

Aqui está um exemplo mais completo:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-animal',
  template: `
    <h1>Detalhes do Animal</h1>
    <p>Id: {{ id }}</p>
    <p>Nome: {{ nome }}</p>
  `
})
export class AnimalComponent implements OnInit {
  id: string;
  nome: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id'];
      this.nome = params['nome'];
    });
  }
}

Nesse exemplo, estamos usando o subscribe no params para atualizar as propriedades id e nome do componente sempre que os parâmetros da rota mudarem. Se a rota for /animais/1?nome=Gato, as propriedades id e nome serão atualizadas para 1 e Gato, respectivamente.

Espero que isso tenha esclarecido o uso do subscribe no params do ActivatedRoute. Lembre-se de que, embora possa parecer opcional, esse recurso é importante para garantir que seu componente esteja sempre atualizado com os parâmetros da rota.

Um abraço e bons estudos.