web-dev-qa-db-fra.com

Envoyer des données par 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 this exemple, comme vous pouvez voir que la route a un paramètre de données, mais cela ne fonctionne pas:

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

parce que certaines données n'est pas un paramètre valide. Comment puis je faire ça? Je ne veux pas envoyer le paramètre avec queryParams.

angularroutingangular-router
98
Motomine

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:

enter image description here

2) Paramètres facultatifs de la route:

enter image description here

3) Paramètres de requête d'itinéraire:

enter image description here

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'ai un plunker de ceci ici: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

303
DeborahK

Il y a une nouvelle méthode ce qui est venu 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 saisir 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

45
Véger Lóránd

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

6
Navasardyan Suren

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

Composant d'accueil 

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

newComponent 

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

enter image description here

J'espère que cela aiderait!

4
dev-nish

Le meilleur 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. Vous devez simplement importer la classe de composant et l'utiliser de manière très simple. Supposons que vous ayez la maison et votre composant et que vous vouliez envoyer des données

COMPOSANT DE 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 LA COMPOSANTE

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 de l'aide.

0
Virendra Yadav

@ dev-nish Votre code fonctionne avec de petits ajustements. 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 décrite précédemment.

0
Saurav Mohan V