Angulaires - Accédez à courant même URL avec le composant rechargez pas la page entière

Je suis en utilisant Angulaire 5 de la bibliothèque, je veux accédez à l'URL actuelle avec le rechargement (actualiser) de l'ensemble du composant pas de la page, j'ai lu à propos de la navigation à l'URL courante dans angulaire document.

Et que 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 le onSameUrlNavigation propriété reload puis naviguer vers la même URL, mais rien ne s'est vraiment passé, comme ceci:

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

Quelqu'un a utiliser avant, peut vous aider?

  • Qu'entendez-vous par rien de ce qui s'est passé? Il n'a pas naviguer à la route dans la barre d'adresse? Il l'a fait naviguer jusqu'à la route par défaut? Il n'y a pas d'erreurs sur la recharger?
  • juste la valeur du paramètre a changé, rien d'autre .
  • Donc, ce n'est pas de travail? Votre question n'est pas très clair sur ce qu'est réellement mauvais.
  • après changement de la propriété et de la navigation, la page doit recharger(actualiser) avec de nouveaux paramètres, pas seulement changer le paramètre.
InformationsquelleAutor Ebraheem Alrabee' | 2018-02-06
  1. 4

    Si je vous comprends bien, c'est comment je le fais:

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

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

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

    Dans le ngOnInit, je regarde pour modifier les paramètres. Lorsque le changement dans les paramètres, j'ai re-récupérer les données.

    Puisque les données sont tous liés, la page "rafraîchit" avec les nouvelles données récupérées.

    • Je vous remercie pour votre réponse, j'ai essayé la même idée, mais sans succès, parce que tous les services et de graphiques, j'ai besoin de changer ses données initiales ont déjà été créé, Par la création d'une méthode d'appeler le code à l'intérieur de ngOnInit mais pas fonctionné, j'ai besoin de recharger la page avec les nouveaux paramètres.
    • Autant que je sache ... la technique ci-dessus est la façon dont son fait normalement. Il n'y a pas d'autres fonctions que je connais de "recharger" de la page. Peut-être que si vous pouvez fournir un plunkr ou stackblitz démontrant la question, nous pourrions fournir plus d'assistance.
    • Je suis à la lecture de ce blog, medium.com/engineering-on-the-incline/..., c'est ce que je veux, mais il y a quand même problème mineur.
    • Vous pouvez obtenir une réponse valable ensuite de poser une question sur son blog. Puisque c'est un (très peu médiatisés) nouvelle fonctionnalité, il y a sans doute pas beaucoup d'entre nous ici familier avec elle.
    • Ouais, c'est encore nouveau et pas a parfaitement fonctionné avec moi, de toute façon, votre réponse est utile dans certains cas, et j'ai trouvé une solution pour l'instant, je vous Remercie pour votre aide.
    • C'est la bonne réponse. Ne perdez pas votre temps sur onSameUrlNavigation

    InformationsquelleAutor DeborahK
  2. 1

    J'ai trouver cette solution de contournement méthode depuis le onSameUrlNavigation propriété Angulaire 5.1 n'est pas ce dont j'ai besoin.

    J'ai juste besoin de remplacer shouldReuseRoute, donc ajouté une exception pour le composant route que je veux actualiser, si les actuels et futurs de la route sont égaux view.

    Et je peux naviguer vers d'autres parcours sans problèmes, même pour naviguer Angulaires Matériel 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 onSameUrlNavigation propriété Angulaire 5.1 vous pouvez consulter ce blog:

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

    InformationsquelleAutor Ebraheem Alrabee'
  3. 0

    En termes de rel-le chargement complet de la page, la normale <a href="/">Reload Page</a> balise fonctionne très bien pour moi. J'ai essayé à l'aide de la "onSameUrlNavigation" de la fonction, mais il n'était pas recharger toute la page comme je le veux.

    InformationsquelleAutor Deji Adesoga
  4. 0

    En route du module:
    ajouter ci-dessous dans chaque itinéraire déclaration

    runGuardsAndResolvers: 'always'

    et 

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

    pour l'e.g category/:id

    et en-dessous de la partie sera sous le Volet

    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 dire pour l'e.g category/11 et category/12 il va appeler loadUserDetail fonction à chaque fois.

    Donc sans rafraichissement de la page vous permettra d'extraire des données à partir du serveur et mettre à jour les dom pour un même parcours avec différents roureParams.

    InformationsquelleAutor Swapnil Dalvi