Envoyer des données par des chemins de routage en Angular

Question

Existe-t-il un moyen d'envoyer des données en tant que paramètre avec router.navigate ? Je veux dire, quelque chose comme este Comme vous pouvez le voir, la route a un paramètre de données, mais en faisant cela, cela ne fonctionne pas :

this.router.navigate(["heroes"], {some-data: "othrData"})

parce que certaines données ne sont pas un paramètre valide. Comment puis-je faire cela ? Je ne veux pas envoyer le paramètre avec queryParams.

Answer 1

Il y a beaucoup de confusion sur ce sujet car il y a tellement de façons différentes de procéder.

Voici les types appropriés utilisés dans les captures d'écran suivantes :

private route: ActivatedRoute
private router: Router

1) Paramètres de routage requis :

2) Paramètres facultatifs de l'itinéraire :

3) Paramètres de requête de route :

4) Vous pouvez utiliser un service pour transmettre des données d'un composant à un autre sans utiliser de paramètres de route.

Pour un exemple, voir : https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

J'en ai un exemplaire ici : https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Answer 2

Il y a une nouvelle méthode qui est venue avec Angular 7.2.0

https://angular.io/api/router/NavigationExtras#state

Envoyez :

this.router.navigate(['action-selection'], { state: { example: 'bar' } });

Recevez :

constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().extras.state.example); // should log out 'bar'
}

Vous pouvez trouver des informations supplémentaires ici :

https://github.com/angular/angular/pull/27198

Le lien ci-dessus contient cet exemple qui peut être utile : https://stackblitz.com/edit/angular-bupuzn

Answer 3

La dernière version d'angular (7.2 +) a maintenant l'option de passer des informations supplémentaires en utilisant NavigationExtras .

Composant de la maison

import {
  Router,
  NavigationExtras
} from '@angular/router';
const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};
this.router.navigate(['newComponent'], navigationExtras);

nouveauComposant

test: string;
constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state as {
    transId: string,
    workQueue: boolean,
    services: number,
    code: string
  };
  this.test = "Transaction Key:" + state.transId + "<br /> Configured:" + state.workQueue + "<br /> Services:" + state.services + "<br /> Code: " + state.code;
}

Sortie

J'espère que cela vous aidera !

Answer 4

Vous pouvez l'utiliser. Angular2+/4/5 - naviguer avec des données https://github.com/Hipparch/Angular2-navigate-with-data

Answer 5

@dev-nish Votre code fonctionne avec des petites modifications. faites le

const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};

en

let navigationExtras: NavigationExtras = {
  state: {
    transd: '',
    workQueue: ,
    services: ,
    code: ''
  }
};

ensuite, si vous voulez envoyer spécifiquement un type de données, par exemple, JSON à la suite du remplissage d'un formulaire, vous pouvez envoyer les données de la même manière que celle expliquée précédemment.