web-dev-qa-db-fra.com

routage angulaire 5 vers le même composant mais param différent, ne fonctionne pas

J'ai un niveau débutant de base 5 app angulaire Il y a seulement 5 composants

mon routage et mes liens ressemblent à ceci

//copied from app.module.ts
const appRoutes:Routes = [
  {path:'',component:HomeComponent},
  {path:'items/:cat',component:ItemsComponent},
  {path:'itemdetail/:id',component:ItemdetailComponent},
  {path:'settings',component:SettingsComponent},
];

//copied from navbar.component.html
<ul>
      <li><a [routerLink]="['/']">Home</a></li>
      <li><a [routerLink]="['/items/8']">Rashion</a></li>
      <li><a [routerLink]="['/items/2']">Vegitables</a></li>
      <li><a [routerLink]="['/items/3']">Fruits</a></li>
      <li><a [routerLink]="['/items/7']">Other</a></li>
      <li><a [routerLink]="['/items/5']">Sweets</a></li>
      <li><a [routerLink]="['/settings']">Settings</a></li>          
</ul>

//copied from items.component.ts
ngOnInit(){
    this.cat = this.route.snapshot.params['cat'];
    this.itemsSrv.getItems(this.cat)
            .subscribe((data)=>{
                this.items=data;
            });
}

les liens ne fonctionnent que s'il est dirigé vers un composant différent,
signifie que je peux naviguer de la page d'accueil à /items/2
mais lorsque je suis dans le composant items, je peux accéder à /items/any-parameter
bien que d’éléments, je puisse aller à la maison ou au composant de configuration.
En bref, il travaille maintenant pour naviguer vers le même composant même si le paramètre est différent .  enter image description here

J'ai remarqué une chose, l'URL est en train de changer, mais le contenu de la page est identique à l'ancienne page qui ne recharge pas la nouvelle URL :(

angularroutingnavigation
6
alamnaryab

Donc, le meilleur moyen consiste à utiliser subscribe for route :

userSubscription: Subscription;
...
ngOnInit() {
   this.userSubscription = this.route.params.subscribe(
            (params: Params) => {
                 //------ some code -----
   })
}

Après cela, vous devez vous désabonner:

ngOnDestroy(): void {
        this.userSubscription.unsubscribe()
}
7
Mohammad Hossein Ganjyar

Je sais que c'est un peu tard, mais je me suis heurté au même problème et j'ai trouvé une solution. Vous utilisez this.route.snapshot.params pour obtenir le paramètre id. Selon la documentation Angular, utilisez uniquement un instantané lorsque votre instance de composant ne sera jamais réutilisée. Instantané fournit uniquement la valeur initiale de la mappe de paramètres de routage et n'est pas mis à jour lorsque le composant est réutilisé. Cela signifie que si vous routez vers un composant par son identifiant, puis (tout en affichant ce composant) essayez de le router vers une nouvelle instance du même composant avec un identifiant différent, le composant initial sera réutilisé mais les données ne seront pas mises à jour car ngOnInit () ne s'appelle pas une seconde fois.

Pour résoudre le problème, vous devez changer;

this.cat = this.route.snapshot.params['cat'];

Pour utiliser ce format;

ngOnInit() {
  this.cat$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.itemsSrv.getItems(params.get('id')))
  );
}

Le this.route.paramMap est renvoyé par un observable qui 

"implique que la mappe de paramètres de route peut changer pendant la durée de vie de ce composant".

Vous devrez probablement modifier d'autres parties de votre code pour utiliser l'Observable (cat $), mais comme je ne peux voir qu'une partie de votre code, je ne peux pas vous conseiller sur d'autres modifications. La documentation ci-dessous contient un fichier de projet (hero-detail.component.ts) à la fin du jalon 3, qui explique comment cela fonctionne.

Vous pouvez lire la documentation officielle ici;

Angular2 + observable paramMap et réutilisation des composants

J'espère que cela aide et codage heureux!

2
HombreLoco

Lorsque vous accédez au même composant, Angular ne va pas relancer votre méthode ngOnInit(). Pour que votre code fonctionne, vous devez utiliser une version des paramètres route qui sont observables et vous abonner aux modifications qui y sont apportées. Assurez-vous de lire les documents Angular concernant le routage . Ils contiennent une foule d'informations utiles.

ngOnInit(){
    this.route.paramMap
        .switchMap(params => this.itemsSrv.getItems(params.get('cat')))
        .subscribe(data => {
            this.items=data;
        });
}

Assurez-vous de vous désabonner de cet abonnement lorsque vous quittez ce composant. Voici une discussion sur les meilleures pratiques pour le faire.

2
Daniel W Strimpel

J'ai aussi fait face à ce problème en faisant mon projet le mieux pour me débarrasser de cette erreur est d'utiliser subscribe for route et que d'utiliser l'interface Ondestroy pour désabonner un événement

    ngOnInit{
       this._router.params.subscribe(param =>{
            // write some code
           let cat=this._router.snapshot.paramMap.get('cat');
          });
}

// après cela, vous devez vous désabonner

    ngOnDestroy(){
    }
0
Shubham Singh