Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Angular não consegue identificar os parâmetros das rotas

por Alexandre Sousa Silva
| 66.1k xp | 30 posts
Application Developer

Olá, como estão?

Estou com um problema no Angular quando tento capturar o parâmetro de uma rota qualquer, não consigo exibí-lo pois o this.route.snapshot.params é um objeto sempre vazio. Já tenho com paramMap.get('nomeDoParametro') e o resultado é sempre nulo... Podem me ajudar?

Mais detalhes sobre o problema: URL: http://localhost:4200/curso/10

Arquivo de configuração das rotas, app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { CoursesComponent } from './components/courses/courses.component';
import { CourseDetailsComponent } from './components/course-details/course-details.component';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'cursos', component: CoursesComponent},
  {path: 'curso/:id', component: CourseDetailsComponent},
];

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

Arquivo app.components.ts, no qual estou tentando exibir via console log o id (parâmetro) capturado:

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable, map } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    console.log(this.route.snapshot.params); // Aqui o resultado é sempre um objeto vazio
 }
}

Lembrando que o arquivo de rotas está importado no app.module, consigo trafegar normalmente em qualquer uma das rotas da aplicação, o problema está exclusivamente em capturar e exibir o valor do parâmetro.

2 respostas
solução!
por Estudante
| 568.5k xp | 1338 posts

Olá!

No seu arquivo app.component.ts, ao usar this.route.snapshot.params, você está tentando acessar os parâmetros da rota atual. No entanto, como o AppComponent provavelmente não está diretamente associado à rota que contém o parâmetro id, é possível que você não esteja recebendo o valor esperado.

Uma abordagem comum é capturar os parâmetros de rota em um componente que está associado diretamente à rota. No seu caso, o CourseDetailsComponent está associado à rota que contém o parâmetro id. Vamos ajustar o código para refletir isso.

No CourseDetailsComponent, você pode fazer o seguinte:

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

@Component({
  selector: 'app-course-details',
  templateUrl: './course-details.component.html',
  styleUrls: ['./course-details.component.scss'],
})
export class CourseDetailsComponent implements OnInit {
  courseId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.courseId = this.route.snapshot.params['id'];
    console.log(this.courseId);
  }
}

Agora, no AppComponent, você pode remover a lógica relacionada aos parâmetros de rota, já que não está diretamente associado à rota que contém o parâmetro id.

Além disso, se você precisar acessar os parâmetros de rota em outros componentes ou serviços, você pode considerar o uso de observáveis para reagir às alterações nos parâmetros de rota. Por exemplo, usando paramMap do ActivatedRoute:

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

@Component({
  selector: 'app-course-details',
  templateUrl: './course-details.component.html',
  styleUrls: ['./course-details.component.scss'],
})
export class CourseDetailsComponent implements OnInit {
  courseId$: Observable<string>;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.courseId$ = this.route.paramMap.pipe(map(params => params.get('id')));
  }
}

Dessa forma, outros componentes ou serviços que precisam do valor do id podem se inscrever nesse Observable (courseId$) para serem notificados sempre que o valor do parâmetro de rota for alterado.

por Alexandre Sousa Silva
| 66.1k xp | 30 posts
Application Developer

Oi, não consigo ver seu nome.

Direto(a) e certeiro(a), resolveu o meu problema... não sabia que o padrão era usar no componente atrelado a rota, estava realmente tentando no app.component.ts.

Muitíssimo obrigado.

Um abraço ;)