Comment Actualiser une Composante Angulaire

Je suis en train de travailler sur un Angulaires du projet. Je suis aux prises avec l'actualisation de l'action dans un composant.

Je voudrais actualiser le routeur sur le bouton cliquez sur.
J'ai le bouton actualiser quand je clique sur le composant/routeur besoin d'être rafraîchi.

J'ai essayé window.location.reload() et location.reload() ces deux ne sont pas adaptés à mon besoin. S'il vous plaît aider si quelqu'un au courant de ça.

Pouvez-vous partager votre code dans cette question ? ce que vous êtes tenté.
c'est un code complexe, il est N le nombre de ligne de code, difficile à partager
normalement, il n'est pas nécessaire de recharger un composant. Vous pouvez avoir une fonction (par exemple, appeler "redémarrer") et d'appeler la fonction dans le bouton Actualiser. Si vous avez besoin de vous abonner à changer de chemin, ou d'un autre service, utilisez la fonction ngOnInit -votre composant doit s'étend OnInit-, pas le constructeur

InformationsquelleAutor Sreehari Ballampalli | 2017-12-14

52

Après quelques recherches, et de modifier mon code comme ci-dessous, le script a fonctionné pour moi. Je viens d'ajouter la condition:
```
this.router.navigateByUrl('/RefrshComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Your actualComponent"])); 
```
- Je suis en utilisant ce dans un injectable service. J'ai remplacé "your actualComponent" avec une variable. La variable a la valeur est définie sur this.location.path() avant l'appel à navigateByUrl. De cette façon, pas besoin de passer des paramètres à partir de composant appelant ou en double/pass autour des routes.
- pouvez-vous nous expliquer ce qu'est le "RefrshComponent" et "Votre actualComponent'?
- La plupart des tout le monde sera bien à l'aide de '/' où /RefrshComponent est, et pour [Your actualComponent"] vous venez de passer l'url (et/ou params) que vous souhaitez recharger comme this.router.navigate(["/items"]). Ce hack essentiellement redirige vers le haut de l'URL, puis très vite de retour à la destination de l'URL, ce qui est imperceptible pour la plupart des utilisateurs et semble être la plus élégante hack pour ce faire il suffit.
- Fonctionne comme un charme! Merci!
- Je suis d'accord cela devrait fonctionner... mais il échoue dans mon application (Angulaire 6). Si j'utilise '/' que mon mannequin route il va (via redirectTo) à l'endroit où mon app-routage.le module.ts redirige sur un chemin de '' (chaîne vide) et s'arrête, ne pas procéder à l'achèvement de la route dans la navigate() appel. Si j'utilise un inexistante chaîne de caractères (par exemple /foo) que mon mannequin route, il va (via redirectTo) à l'endroit où mon app-routage.le module.ts redirections pour ** (tout le reste) et s'arrête de nouveau, ne va pas à la vraie route. Curieusement, la barre d'URL est modifiée pour le parcours réel. Toute réflexion sur ce qui est différent ici?
InformationsquelleAutor Sreehari Ballampalli
21

Utiliser le cette.ngOnInit(); pour recharger le même composant au lieu de recharger la page entière!!
```
DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }   
  }
```
- Même si cela peut répondre les auteurs remettent en question, il manque quelques explications de mots et/ou des liens vers de la documentation. Raw des extraits de code ne sont pas très utile sans quelques phrases autour d'eux. Vous pouvez également trouver comment écrire une bonne réponse très utile. Merci de modifier votre réponse.
- C'est assez concis, merci
- C'est une meilleure saisie de la réponse choisie, mais il manque d'explication. Dans mon cas précis, j'ai dû actualiser un composant enfant. Dans ce cas, il y a plusieurs façon, mais ce sont recommandés à l'aide d'un service de radiodiffusion ou un événement de la mère à l'enfant.
- D'accord, cela ne fonctionne que si vous voulez vous rafraîchir la composante de l'intérieur de la composante - si vous traitez avec l'enfant/composants externes ce.ngOnInit() ne fonctionnera pas
InformationsquelleAutor Shinoy Babu

L'ajout de ce code pour le composant requis est le constructeur qui a travaillé pour moi.

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    //Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

Assurez-vous de unsubscribe de cette mysubscription a dans ngOnDestroy().

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

Reportez-vous à ce fil de discussion pour plus de détails - https://github.com/angular/angular/issues/13831

InformationsquelleAutor sankar

6

Heureusement, si vous utilisez Angulaire 5.1+, vous n'avez pas besoin de mettre en œuvre un hack plus que la prise en charge native a été ajouté. Vous avez juste besoin de ensemble onSameUrlNavigation pour "recharger" dans le RouterModule options :
```
@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })
```
Plus d'informations peuvent être trouvées ici: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
- Vous pouvez utiliser router.onSameUrlNavigation = 'reload' propriété de injectés Routeur, trop.
- À l'aide angulaire 6, pour moi, cela ne fait aucune différence, qui est, le composant n'a pas recharger. La accepté de répondre fonctionne cependant.
- Bien que pas tout à fait clair dans les docs, onSameUrlNavigation est destiné à reinvoke Gardes/Résolveurs, et de ne pas recharger déjà acheminé composants. Voir github.com/angular/angular/issues/21115 pour en savoir plus sur cette. Cette solution fonctionne pour les grandes applications les plus complexes à l'aide de Gardes/Résolveurs mais échoue pour des exemples simples.
InformationsquelleAutor Lucian Moldovan
2

Cela peut être réalisé via un hack, Accédez à quelques exemple de composant, puis naviguez jusqu'à l'élément que vous souhaitez recharger.
```
this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);
```
- SampleComponent signifie qu'il doit être un élément vide ou à un autre composant dans mon projet?
- il devrait être un mannequin, ne peut être vide
- Ok je vais essayer cela
- si je donne vrai que je reçois un message d'erreur : [ts] de Type "vrai" n'a pas de propriétés en commun avec le type 'NavigationExtras'
- vérifier la mise à jour de la réponse, vous devez passer un objet { skipLocationChange: true }
- votre solution ne fonctionne pas, et aussi j'ai débogué le code, tout d'abord, il va cette url - cette.routeur.navigateByUrl('/SampleComponent', { skipLocationChange: true }); et puis il va à cette adresse-cette.routeur.naviguer(["yourLandingComponent"]); ici, en notant rafraîchissant/rechargement, je suis même problème, si vous pouvez me fournir une meilleure solution qui peut m'aider
- NavigateByUrl ne faisait pas l'aider dans mon cas. Il a besoin de ce.routeur.routeReuseStrategy.shouldReuseRoute = function () { return false; };
InformationsquelleAutor Sajeetharan
1

Dans mon application j'ai composant et toutes les données proviennent de l'API dont je suis l'appel en Composant le constructeur.
Il y a un bouton en qui je mets à jour ma page de données. sur le bouton cliquez sur j'ai enregistrer des données dans le back-end et actualiser les données.
Donc, pour rafraîchir les composants, comme par mon exigence est uniquement pour actualiser les données.
si c'est également votre exigence, d'utiliser le même code écrit dans le constructeur du composant.

InformationsquelleAutor Bh00shan
0

Autre manière d'actualiser (dure) d'une page dans angulaire 2 comme cette
c'est ressembler à f5
```
import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}
```
- Il a dit que le rechargement de la page entière n'est pas approprié, il recharge la page entière, et pas seulement une ou de plusieurs composants.
InformationsquelleAutor chirag sorathiya

kdo

//reload page hack methode

push(uri: string) {
    this.location.replaceState(uri) //force replace and no show change
    await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
    this.location.replaceState(uri) //replace
  }

InformationsquelleAutor Julien Rousset

Vous devez vous connecter pour publier un commentaire.