0
votes

Angular 7 ne démarre pas la navigation, aucune erreur n'est visible. Des conseils sur ce qui ne va pas?

J'ai une application Angular 7 où je navigue vers un lien par exemple éligibilité / 1, cela fonctionne sans problème et l'onglet réseau affiche la demande sortante. Une fois la page affichée, les tentatives de navigation vers l'éligibilité / 2 (via un clic sur un lien) n'enverront pas de demande sortante.

La trace du routeur montre ceci:

Trace du routeur

Ceci est le Javascript après l'appel de navigation du routeur. Notez que la promesse retournée à temp montre un état de zone Null et Value of Array (0).

Est-ce un problème de zone? Notez qu'il n'y a pas non plus d'erreurs de console.

Après l'appel de navigation


2 commentaires

Pour «demande sortante», vous voulez dire un appel au backend de l'API? Si oui, pouvez-vous publier le code que vous utilisez pour effectuer l'appel?


Voir la deuxième ligne dans la capture de code ci-dessus (2e photo)


3 Réponses :


1
votes

S'il n'y a que des appels sortants lors de l'initialisation de votre composant, je ne m'attendrais pas à ce qu'il y ait quoi que ce soit dans l'onglet réseau. Les applications angulaires sont des SPA et le composant qui gère votre URL d' eligibility n'est probablement créé qu'une seule fois, puis chargé de la mémoire à chaque navigation suivante jusqu'à sa destruction. Donc, si vous voulez que certains comportements soient effectués à chaque navigation, vous devrez vous abonner aux événements de navigation et y faire votre travail.

J'ai un exemple de routage simple qui donne l'impression qu'il se comporte de la même manière que ce que vous décrivez. Espérons que cela aide.


1 commentaires

Cela confirme le comportement, la page est pour ainsi dire "mise en cache". Cela peut expliquer pourquoi l'utilisation de Window.Open semble fonctionner. Je vais confirmer et poster en retour.



2
votes

Afin d'actualiser la page lors de la navigation vers la même URL, vous devez configurer le RouterModule de cette manière:

this.route.params.subscribe((params) => {
  console.log(params);
  console.log(this.route.snapshot.data);
});

Cela changera tout le comportement de votre application, il est donc probablement préférable de s'abonner aux paramètres observables de l' ActivatedRoute :

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


1 commentaires

Juste pour développer un peu cela, un composant n'est pas détruit puis réinitialisé lorsqu'un paramètre d'itinéraire change, c'est pourquoi vous n'obtenez pas de nouvelle requête HTTP. L'approche correcte comme le souligne Martino est de s'abonner aux paramètres de route observables et de déclencher la requête HTTP à partir de là.



0
votes

Angular, par défaut, n'actualisera pas un composant déjà chargé. Mais ce comportement peut être remplacé comme indiqué ici.

 // Browser is already on /pathName/5102 
 // We see the proper display which means
 // our router paths are correct.
 // And now we attempt to go to a new path.

 let newLocation = `/pathName/5110`;
 // override default re use strategy
 this.router
    .routeReuseStrategy
    .shouldReuseRoute = function () {
        return false;
 };
 this.router
   .navigateByUrl(newLocation)
   .then(
   (worked) => {
     // Works only because we hooked
     // routeReuseStrategy.shouldReuseRoute 
     // and explicitly told it don't reuse
     // route which forces a reload.
     // Otherwise; the url will change but new
     // data will not display!
   },
   (error) => {
    debugger;
    }
 );


0 commentaires