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?
snapshot
es una manera limitada de acceder a los parámetros (no avisa de cambios)