recargar - rutas hijas angular 4

No se puede volver a cargar/actualizar la ruta activa

Question

Recientemente me actualicé al nuevo RC3 y Router3alpha y parece que algunas cosas han cambiado.

Noté que un clic en el enlace de una ruta activa ya no da como resultado que el componente se vuelva a cargar. ¿Cómo logro este comportamiento con el nuevo enrutador3?

Mi enlace parece

<a [routerLink]="[''/link1'']">Link1</a>

Y para probar simplemente usé un número al azar en ngOnInit:

export class LinkoneComponent implements OnInit 
{

    public foo: number;
    constructor() {}

    ngOnInit() 
    {
        this.foo = Math.floor(Math.random() * 100) + 1;
    }

}

Funciona muy bien al cambiar entre rutas, pero al hacer clic en la ruta activa actualmente no se produce una recarga del componente.

Answer 1

A partir de Angular 5.1 esto ahora se puede hacer utilizando la opción de configuración onSameUrlNavigation como parte del enrutador angular incorporado. Es bastante sencillo configurarlo y ponerlo en marcha, aunque no es obvio en la documentación.

Lo primero que tendrá que hacer es establecer la opción dentro de su app.routing.ts si tiene uno o el archivo donde está configurado su enrutamiento de la aplicación.

Hay dos valores posibles para onSameUrlNavigation ''reload'' o false . El valor predeterminado es false que no provoca que suceda nada cuando se le pide al enrutador que navegue a la ruta activa. Queremos establecer este valor para reload a reload . Vale la pena señalar que la reload realidad no hace el trabajo de volver a cargar la ruta, solo vuelve a activar los eventos en el enrutador en los que necesitamos engancharnos.

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

Para determinar cuándo se dispararon esos eventos, debe especificar la opción de configuración runGuardsAndResolvers en su ruta. Esto puede tomar tres valores ...

paramsChange : solo dispara cuando los parámetros de la ruta han cambiado, por ejemplo, donde cambia la identificación en /user/:id

paramsOrQueryParamsChange - se paramsOrQueryParamsChange cuando cambia un paramsOrQueryParamsChange ruta o cambia un parámetro de consulta. por ejemplo, el cambio de propiedad id o the limit en /user/:id/invites?limit=10

always - Disparar siempre cuando se navega la ruta

Queremos especificar siempre en este caso. Una ruta de ejemplo se muestra a continuación.

export const routes: Routes = [
  {
    path: ''invites'',
    component: InviteComponent,
    children: [
      {
        path: '''',
        loadChildren: ''./pages/invites/invites.module#InvitesModule'',
      },
    ],
    canActivate: [AuthenticationGuard],
    runGuardsAndResolvers: ''always'',
  }
]

Ese es su enrutador configurado. El siguiente paso es manejar los eventos dentro de uno de sus componentes. Tendrá que importar el enrutador a su componente y luego conectarlo a los eventos. En este ejemplo, me he enganchado en el evento NavigationEnd que se activa una vez que el enrutador ha completado su navegación de una ruta a la siguiente. Debido a la forma en que hemos configurado la aplicación, ahora se activará incluso si intenta navegar a la ruta actual.

export class InviteComponent implements OnInit {
  constructor(
    // ... your declarations here
    private router: Router,
  ) {
    // subscribe to the router events
    this.router.events.subscribe((e: any) => {
      // If it is a NavigationEnd event re-initalise the component
      if (e instanceof NavigationEnd) {
        this.initialiseInvites();
      }
    });
  }

  initialiseInvites() {
    // Set default values and re-fetch any data you need.
  }
}

El levantamiento pesado va al método initialiseInvites() , aquí es donde restablece las propiedades a sus valores predeterminados y recupera los datos de los servicios para que el componente vuelva a su estado inicial.

Debe repetir este patrón en cada componente que desee volver a cargar al hacer clic o actualizar a través de algún botón de actualización, asegurándose de agregar la opción runGuardsAndResolvers a cada ruta en el archivo de enrutamiento.

Answer 2

En mi modesta opinión, podría usar window.location.reload() en mecanografiado. De esta manera puede ser fácil y seguro porque es parte de las funcionalidades del navegador.

Answer 3

Este es el mejor truco que he podido solucionar para este problema tan molesto:

    var currentUrl = this.router.url;
    var refreshUrl = currentUrl.indexOf(''someRoute'') > -1 ? ''/someOtherRoute'' : ''/someRoute'';
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl));

Esto funciona, pero sigue siendo un truco y odio que el equipo Angular no haya proporcionado un método reload()

Answer 4

Esto no es compatible actualmente. Si solo cambian los valores de los parámetros pero la ruta permanece igual, el componente no se vuelve a crear.

Ver también https://github.com/angular/angular/issues/9811

Puede suscribirse a params para recibir notificaciones cuando los parámetros cambien para reinicializar la instancia del componente.

Ver también https://.com/a/38560010/217408

Answer 5

Para Angular 2 rc7 - enrutador 3.0

Cambiar la URL base en index.html a <script>document.write(''<base href="/" />'');</script>

Answer 6

Corte de recarga de ruta actual 2-4 angular

Para mí, usar este método funciona:

onRefresh() {
  this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;};

  let currentUrl = this.router.url + ''?'';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

Puede adjuntar este método a un evento de clic en el componente actual para volver a cargarlo.

Answer 7

if (currentUrl.indexOf(''/settings'') > -1) {
    this.router.navigateByUrl(''/communication'').then(() => this.router.navigateByUrl(''/settings''));
} else {
    this.router.navigate([''/settings'']);
}