javascript - El enrutador Angular2 2.0.0 no recarga los componentes cuando la misma URL está cargada con diferentes parámetros.

html angular2-routing

Question

Tengo esto en mi archivo .routing.ts

export const routing = RouterModule.forChild([
{
    path: ''page/:id'',
    component: PageComponent
}]);

Mi archivo PageComponent comprueba el parámetro id y carga los datos en consecuencia. En versiones anteriores del enrutador, si pasaba de / page / 4 a / page / 25, la página se "recargaría" y los componentes se actualizarían.

Ahora, cuando intento navegar a / page / X donde X es el id, solo se carga la primera vez, luego la URL cambia, pero los componentes no se "vuelven a cargar".

¿Hay algo que deba pasarse para obligar a mis componentes a recargarse y llamar al evento ngOnInit?

Answer 1

Este código funciona tanto para angular 2 como para 4. debe suscribirse al parámetro como se muestra a continuación

selected_id:any;
constructor(private route: ActivatedRoute) { }
ngOnInit() 
{
    this.route.params.subscribe(params => {
    this.selected_id = params[''id'']; 
    });
}

supongamos que su página aún no se vuelve a cargar, anule la suscripción utilizando ngOnDestroy.

ngOnDestroy()
{
 this.selected_id.unsubscribe();
}

esto será claro el valor del parámetro anterior

La lógica anterior funciona para mí. Espero que te ayude.

[Info]
var selected_id = this.route.snapshot.paramMap.get(''id'');
//earlier i was used this code to get param value,it works when navigate from 
//different page but not in the same page reload

Answer 2

con Angular 7.2, router 7.2 puede hacer lo siguiente.

constructor(
    private router: Router
) {
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
    }  
}

Lo intenté de varias maneras, pero esa fue la única forma en que mi enrutador cargó el contenido del componente al que estoy navegando.

Puedes leer más sobre las estrategias de reutilización de rutas https://angular.io/api/router/RouteReuseStrategy

Answer 3

actualización 2

Esta respuesta es solo para una versión de enrutador descontinuada hace mucho tiempo.

Consulte https://angular.io/api/router/RouteReuseStrategy para https://angular.io/api/router/RouteReuseStrategy cómo hacerlo en el enrutador actual.

actualización 1

Eso ahora está arreglado (Angular 2.3) para el nuevo enrutador mediante https://github.com/angular/angular/pull/13124 que permite proporcionar una estrategia de reutilización personalizada.

Para ver un ejemplo, consulte también https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

original

https://github.com/angular/angular/issues/9811

Ese es un problema conocido. Actualmente no hay forma de hacer que el enrutador vuelva a crear el componente en cambios de ruta de solo parámetros.

Discutieron los planes para implementar algunas estrategias de reutilización eventualmente.

Puede suscribirse a los cambios de parámetros y ejecutar su código allí en lugar de en ngOnInit()