4

Estoy utilizando el router de angular con una ruta que utiliza un parámetro. Con esa ruta cargo un componente que es siempre el mismo pero quiero que tenga unos datos u otros en función del parámetro que se le pase.

const routes: Routes = [
  { path: '', redirectTo: '/inicio', pathMatch: 'full' },
  { path: 'inicio', component: PaginaInicioComponent },
  { path: 'edificios/:nombre', component: DatosEdificioComponent }, <--ruta
  .....
];

Componente:

@Component({
  selector: 'app-datos-edificio',
  templateUrl: './datos-edificio.component.html',
  styleUrls: ['./datos-edificio.component.css']
})
export class DatosEdificioComponent implements OnInit {


  constructor(
    private route: ActivatedRoute,
    private edificioService: EdificioService,
    private location: Location
    ) { }

  ngOnInit() {
    this.getDatosEdificio();
    console.log("oniniiit");
  }

  getDatosEdificio(): void {
    const nombreEdificio = this.route.snapshot.paramMap.get('nombre').toString();

    this.edificioService.getDatosEdificio(nombreEdificio)
        .subscribe(edificios =>{
          // Obtengo los datos del edificio
        });

  }

Hasta aquí todo correcto. La primera vez que accedo a una ruta, por ejemplo 'edificios/Aulario' funciona perfectamente, pero si una vez cargado ese componente la siguiente ruta a la que accedo es 'edificios/Hospital' el componente sigue teniendo los datos del edificio del Aulario.

He observado que el mensaje del console.log("oninit") sólo se imprime la primera vez, así que deduzco que como es el mismo componente al que se quiere acceder a través del router no lo crea de nuevo y se queda con los datos que tenía anteriormente.

Me gustaría que cada vez que se acceda a la ruta pudiera obtener los datos del nombre del edificio que le pase como parámetro. ¿Cómo podría hacerlo?

1
  • 1
    Buena deducción, el problema es que el componente no se entera de los cambios de URL, snapshot es una manera limitada de acceder a los parámetros (no avisa de cambios) Commented el 3 abr. 2019 a las 11:13

1 respuesta 1

3

En lugar de usar el snapshot, que te devuelve el valor estático en el momento que lo llamas, te puedes suscribir a route.params , que te proporciona un observable que emite un valor cada vez que los parámetros cambian.

@Component({
  selector: 'app-datos-edificio',
  templateUrl: './datos-edificio.component.html',
  styleUrls: ['./datos-edificio.component.css']
})
export class DatosEdificioComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private edificioService: EdificioService,
    private location: Location
  ) { }

  ngOnInit() {
    this.suscribeCambioDeRuta();
    console.log("oniniiit");
  }

  suscribeCambioDeRuta(): void {
    this.route.params.subscribe(params => {
      this.edificioService.getDatosEdificio(params['nombre'])
        .subscribe(edificios =>{
          // Obtengo los datos del edificio
        });
   });
  }
}

Con esto te harás una idea aunque el código así es un poco feo. Puedes usar pipe() en vez de lanzar una suscripción dentro de otra.

3
  • 1
    Vale, he aplicado tu solución pero haciendo la suscripción en el constructor y que llame a el método para obtener los datos pasandole como parámetro el valor obtenido. Es decir: constructor(...){route.params.subscribe(params => { this.getDatosEdificio(params['nombre']); })}. Así queda un poco más elegante. Muchas gracias por la respuesta! Commented el 3 abr. 2019 a las 11:21
  • Buena opción, queda mejor. De nada! Commented el 3 abr. 2019 a las 11:29
  • Aunque no afecta al comportamiento, los desarrolladores de angular recomiendas dejar el constructor vacío y pasar la lógica a ngOnInit, pero es algo opinable Commented el 24 feb. 2021 a las 10:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.