web-dev-qa-db-fra.com

Angular - Accédez à la même URL actuelle avec le rechargement du composant et non la page entière

J'utilise Angular 5 bibliothèque, je veux naviguer vers l'URL actuelle avec recharger (actualiser) le composant entier pas la page, j'ai lu sur la navigation vers l'URL actuelle dans angular document.

Et c'est ce dont j'ai besoin:

 /**
 * Define what the router should do if it receives a navigation request to the current URL.
 * By default, the router will ignore this navigation. However, this prevents features such
 * as a "refresh" button. Use this option to configure the behavior when navigating to the
 * current URL. Default is 'ignore'.
 */
onSameUrlNavigation: 'reload' | 'ignore';

Maintenant, j'ai essayé de définir la propriété onSameUrlNavigation sur reload puis de naviguer vers la même URL, mais rien ne s'est passé, comme ceci:

this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['view'], { queryParams: { QueryUUID: selectedId } });

Quelqu'un l'a déjà utilisé, peut-il aider?

angularroutes
5
Ebraheem Alrabee'

J'ai trouvé cette méthode de contournement depuis la propriété onSameUrlNavigation dans Angular 5.1 n'est pas ce dont j'ai besoin.

J'ai juste besoin de remplacer shouldReuseRoute, j'ai donc ajouté une exception pour la route du composant que je veux rafraîchir, si la route actuelle et future sont égales view.

Et je peux également naviguer vers un autre itinéraire sans problème, même pour naviguer à partir de Angular Material sidenav.

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
};

Mise à jour:

Pour ceux qu'ils veulent utiliser la nouvelle propriété onSameUrlNavigation dans Angular 5.1 vous pouvez vous référer à ce blog:

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

2
Ebraheem Alrabee'

Si je vous comprends bien, voici comment je le fais:

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getMovie(id);
        }
    );
}

Ou pour regarder les paramètres de requête:

ngOnInit(): void {
    this.route.queryParams.subscribe(param => {
        this.pageTitle = 'Movie List';
        this.getMovies();
    });
}

Dans le ngOnInit, je surveille les modifications des paramètres. Lorsque les paramètres changent, je récupère à nouveau les données.

Comme les données sont toutes liées, la page "se rafraîchit" avec les données nouvellement récupérées.

5
DeborahK

Vous pouvez utiliser les événements de routeur angular à cet effet.

import { takeUntil, filter } from "rxjs/operators";
import { Router, NavigationEnd } from "@angular/router";

this.router.events.pipe(
      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
      takeUntil(this._unsubscribeAll),
).subscribe(() => {
      this.cache = {};
      this.cachedRows = [];
      this.getRollingJobs(this.page);
});
0
casper123

Dans le module d'itinéraire: ajoutez ci-dessous dans chaque déclaration d'itinéraire

runGuardsAndResolvers: 'always'

et

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

par exemple category/:id

et cette partie ci-dessous sera sous Composante

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        // do something with the query params
    });
        this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
}

pour chaque changement d'itinéraire, dites par exemple category/11 et category/12 il appellera la fonction loadUserDetail à chaque fois.

Donc, sans rafraîchir la page, vous récupérerez les données du serveur et mettrez à jour le dom pour le même itinéraire avec différents roureParams.

0
Swapnil Dalvi

En termes de rel-chargement de la page entière, la normale <a href="/">Reload Page</a> tag fonctionne très bien pour moi. J'ai essayé d'utiliser la fonction "onSameUrlNavigation", mais elle ne rechargeait pas la page entière comme je le souhaitais.

0
desoga