web-dev-qa-db-fra.com

angular 5.2 onSameUrlNavigation ne fonctionne pas

J'essaie de recharger mes navigations dans mon application angular 5.2 sans succès. Si les paramètres sont inchangés, le routeur angular angulaire ignorera mes navigations).

Comment je navigue:

this.router.navigate(['/search', buildParamsFromSearchCriteria(criteria)]);

Cela permet d'accéder à:

/search;pageSize=20;page=1;orderBy=price;sortDirection=ASCENDING

Ma configuration de module:

imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules, enableTracing: false, onSameUrlNavigation: 'reload' })],
angularangular5
15
heldt

J'ai rencontré le même problème en essayant de rafraîchir une page en cliquant sur son bouton associé dans la barre de navigation.

Comme indiqué dans les commentaires, onSameUrlNavigation exécute uniquement les gardes et les résolveurs, mais ne réinitialise pas les composants. La partie intéressante est qu'elle déclenche également une navigation.

J'ai donc créé une classe abstraite qui réagit à l'événement NavigationEnd:

/**
 * Abstract class that allows derived components to get refreshed automatically on route change.
 * The actual use case is : a page gets refreshed by navigating on the same URL and we want the rendered components to refresh
 */
export abstract class AutoRefreshingComponent implements OnInit, OnDestroy {
  public routerEventsSubscription: Subscription;
  protected router: Router;

  constructor() { 
    this.router = AppInjector.get(Router);
  }

  /**
   * Initialization behavior. Note that derived classes must not implement OnInit.
   * Use initialize() on derived classes instead.
   */
  ngOnInit() {
    this.initialize();
    this.routerEventsSubscription = this.router.events.filter(x => x instanceof NavigationEnd).subscribe(res => {
      this.initialize();
    });
  }

  /**
   * Destruction behavior. Note that derived classes must not implement OnDestroy.
   * Use destroy() on derived classes instead.
   */
  ngOnDestroy(): void {
    this.routerEventsSubscription.unsubscribe();
    this.destroy();
  }

  /**
   * Function that allows derived components to define an initialization behavior
   */
  abstract initialize(): void;

  /**
   * Function that allows derived components to define a destruction behavior
   */
  abstract destroy(): void;

}

AppInjector fait référence à ceci:

import {Injector} from '@angular/core';

/**
 * Allows for retrieving singletons using `AppInjector.get(MyService)` (whereas
 * `ReflectiveInjector.resolveAndCreate(MyService)` would create a new instance
 * of the service).
 */
export let AppInjector: Injector;

/**
 * Helper to access the exported {@link AppInjector}, needed as ES6 modules export
 * immutable bindings; see http://2ality.com/2015/07/es6-module-exports.html
 */
export function setAppInjector(injector: Injector) {
    if (AppInjector) {
        // Should not happen
        console.error('Programming error: AppInjector was already set');
    }
    else {
        AppInjector = injector;
    }
}

Et dans l'AppModule:

import { setAppInjector } from './app.injector';

// ...

export class AppModule {
  constructor(private injector: Injector) {
    setAppInjector(injector);
  }
}

Ensuite, j'ai fait étendre tous mes composants nécessaires AutoRefreshingComponent et implémenter les fonctions nécessaires.

J'espère que cette réponse tardive vous aidera.

0
Guerric P
this.router.navigated =false
work for me  then at ngOnInit just put this below code
this._initise = this.router.events.pipe(
  filter((event: RouterEvent) => event instanceof NavigationEnd),
  takeUntil(this.destroyed)
).subscribe(() => {
  this.router.navigated = false;
  console.log('initialiseInvites')
  this.initialiseInvites();
});
0
belim ayaz razzakbhai