page - router.navigate not working angular 6

Router Navigate no llama a ngOnInit cuando la misma página

Question

Estoy llamando a router.navigate en la misma página con algunos parámetros de cadena de consulta. En este caso, ngOnInit() no llama. ¿Es por defecto o necesito agregar algo más?

Answer 1

¿Probablemente necesites recargar la página? Esta es mi solución: he cambiado mi @NgModule (en el archivo app-routing.module.ts en mi caso):

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ''reload''})] })

Answer 2

Considere mover el código que tenía en ngOnInit a ngAfterViewInit. Este último parece ser llamado en la navegación del enrutador y debería ayudarlo en este caso.

Answer 3

Cuando desee enrutador, navegue en la misma página y desee llamar a ngOnInit (), por lo que le gusta, por ejemplo,

this.router.navigate ([''categoría / lista'', categoría]) .then (() => window.location.reload ());

Answer 4

Es probable que este problema provenga del hecho de que no está finalizando sus suscripciones usando ngOnDestroy. Aquí se explica cómo hacerlo.

1. Traiga la siguiente importación de suscripción rxjs. import { Subscription } from ''rxjs/Subscription'';

2. Agregue OnDestory a su Angular Core Import. import { Component, OnDestroy, OnInit } from ''@angular/core'';

3. Agregue OnDestory a su clase de exportación. export class DisplayComponent implements OnInit, OnDestroy {

4. Cree una propiedad de objeto con un valor de Suscripción de rxjs bajo su clase de exportación para cada suscripción en el componente. myVariable: Subscription;

5. Establezca el valor de su suscripción en MyVariable: Suscripciones. this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});

6. Luego, justo debajo de ngOninit, coloque el gancho del ciclo de vida ngOnDestory () y escriba su declaración de cancelación de suscripción para su suscripción. Si tiene múltiples, agregue más ngOnDestroy() { this.myVariable.unsubscribe(); } ngOnDestroy() { this.myVariable.unsubscribe(); }

Answer 5

Puede ajustar la estrategia de reutilización en el enrutador.

constructor(private router: Router) {
    // override the route reuse strategy
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
}

Answer 6

Puede inyectar la ruta ActivatedRoute y suscribirse a los params

constructor(route:ActivatedRoute) {
  route.params.subscribe(val => {
    // put the code from `ngOnInit` here
  });
}

El enrutador solo destruye y recrea el componente cuando navega a una ruta diferente. Cuando solo se actualizan los parámetros de ruta o de consulta pero la ruta es la misma, el componente no se destruirá ni se recreará.

Una forma alternativa de forzar la recreación del componente es utilizar una estrategia de reutilización personalizada. ¿Ver también Angular2 router 2.0.0 no recargar componentes cuando la misma url cargada con diferentes parámetros? (Parece que todavía no hay mucha información disponible sobre cómo implementarla)

Answer 7

NgOnInit se llamaría una vez cuando se crea una instancia. Para la misma instancia, NgOnInit no se volverá a llamar. Para llamarlo es necesario destruir la instancia creada.