Envoyer des données via des chemins de routage dans Angular

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

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

car certaines données ne sont pas un paramètre valide. Comment puis je faire ça? Je ne veux pas envoyer le paramètre avec queryParams.

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

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 d'itinéraire:

4) Vous pouvez utiliser un service pour transmettre des données d'un composant à un autre sans utiliser du tout les paramètres d'itinéraire.

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

J'ai un plunker de ceci ici: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Il existe une nouvelle méthode fournie avec Angular 7.2.0

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

Envoyer:

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

Recevoir:

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

Vous pouvez trouver quelques informations supplémentaires ici:

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

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

La dernière version d'angular (7.2 +) a maintenant la possibilité de transmettre des informations supplémentaires à l'aide de NavigationExtras .

Composant 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;
}

Production

J'espère que cela aiderait!

@ dev-nish Votre code fonctionne avec de petites modifications. faire le

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

dans

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

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

Dans navigateExtra, nous ne pouvons passer qu'un certain nom spécifique en argument, sinon il affiche une erreur comme ci-dessous: Pour Ex- Ici, je veux passer la clé client dans le routeur de navigation et je passe comme ceci-

this.Router.navigate(['componentname'],{cuskey: {customerkey:response.key}});

mais il montre une erreur comme ci-dessous:

Argument of type '{ cuskey: { customerkey: any; }; }' is not assignable to parameter of type 'NavigationExtras'.
  Object literal may only specify known properties, and 'cuskey' does not exist in type 'NavigationExt## Heading ##ras'

.

Solution: nous devons écrire comme ceci:

this.Router.navigate(['componentname'],{state: {customerkey:response.key}});

Le mieux que j'ai trouvé sur Internet pour cela est ngx-navigation-with-data . C'est très simple et bon pour la navigation des données d'un composant à un autre composant. Vous devez simplement importer la classe de composant et l'utiliser de manière très simple. Supposons que vous ayez la maison et à propos du composant et que vous souhaitiez envoyer des données

COMPOSANT DE LA MAISON

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(public navCtrl: NgxNavigationWithDataComponent) { }

 ngOnInit() {
 }

 navigateToABout() {
  this.navCtrl.navigate('about', {name:"virendta"});
 }

}

À PROPOS DE COMPOSANT

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-about',
 templateUrl: './about.component.html',
 styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

 constructor(public navCtrl: NgxNavigationWithDataComponent) {
  console.log(this.navCtrl.get('name')); // it will console Virendra
  console.log(this.navCtrl.data); // it will console whole data object here
 }

 ngOnInit() {
 }

}

Pour toute requête, suivez https://www.npmjs.com/package/ngx-navigation-with-data

Commentez pour obtenir de l'aide.