1

Mi duda no es sobre un codigo mio sino uno que encontre, me funciono, pero nose como funciona. Es el siguiente:

let currentUrl = this.router.url;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate([currentUrl]);

Me funciona perfecto para lo que quiero, que era actualizar un solo componente y no tener que actualizar toda mi pagina, ya que al crear una nuevo objeto en la base datos la unica forma de verlo reflejado en mi pagina era si la recargaba manualmente

1
  • y cual es el problema?... Commented el 4 oct. 2022 a las 13:29

2 respuestas 2

1

RouteReuseStrategy es un provider de Angular

Nos brinda la estrategia que nos permite decidir qué componente de ruta puede vivir más allá de su enrutamiento, y qué componente de ruta está condenado a ser creado y recreado cada vez que un usuario sale o ingresa a la ruta.

Uno de las clases abstractas de la anterior es:

abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;

Por lo tanto con :

this.router.routeReuseStrategy.shouldReuseRoute = () => false;

Le decimos a Angular que no reutilice el mismo objeto de componente al navegar entre rutas que hacen referencia a la misma clase de componente.

Luego Con onSameUrlNavigation: La propiedad define lo que debe hacer el enrutador si recibe una solicitud de navegación a la URL actual. De forma predeterminada, el enrutador ignorará esta navegación

onSameUrlNavigation?: 'reload' | 'ignore'

this.router.onSameUrlNavigation = 'reload';

Al darle el valor reload la ruta se reactivará y no usara al mismo objeto de componente por lo cual actualizara al componente

/**
 * @description
 *
 * Provides a way to customize when activated routes get reused.
 *
 * @publicApi
 */
export abstract class RouteReuseStrategy {
  /** Determines if this route (and its subtree) should be detached to be reused later */
  abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;

  /**
   * Stores the detached route.
   *
   * Storing a `null` value should erase the previously stored value.
   */
  abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle|null): void;

  /** Determines if this route (and its subtree) should be reattached */
  abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;

  /** Retrieves the previously stored route */
  abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null;

  /** Determines if a route should be reused */
  abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
}

introducir la descripción de la imagen aquí

interface RouterConfigOptions { canceledNavigationResolution?: 'replace' | 'computed' onSameUrlNavigation?: 'reload' | 'ignore' paramsInheritanceStrategy?: 'emptyOnly' | 'always' urlUpdateStrategy?: 'deferred' | 'eager' }
1
  • que genio! no encontre en ningun lado que lo expliquen cortita y al pie
    – user300807
    Commented el 6 oct. 2022 a las 20:23
0

Un pequeño await. :OP

Buscando respuesta para este día 05/10/2023 Angular version 15. Mi componente header no se actualizaba al loguerme en la aplicación, por lo cual no encotraba el rol, con el cual debia actuar y mostrar los botones correspondientes a dicho rol y no mostraba ningun botón. Pero al loguearme el rol si se encontraba en e localStorage, solo que no se actualizaba el componente header y no lo leia. Asi que se me ocurrió hacer esto:

`reloadPage() {

setTimeout(() => { location.reload(); }, 100);`

Crear una función que esperara un pequeño tiempo y la llamaba del ngOnit y así se recarga toda la pagina incluyendo mi componente header. Puse el tiempo de espera en 100, pero tu lo puedes adaptar a tu necesidad.

1
  • 1
    Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 5 oct. 2023 a las 23:57

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.