Invia dati tramite percorsi di routing in Angolare

Esiste un modo per inviare i dati come parametro con router.navigate? Voglio dire, qualcosa come questo esempio, come puoi vedere il percorso ha un parametro di dati, ma facendo questo non funziona:

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

perché some-data non è un parametro valido. Come lo posso fare? Non voglio inviare il parametro con queryParams.

C'è molta confusione su questo argomento perché ci sono molti modi diversi per farlo.

Ecco i tipi appropriati utilizzati nelle seguenti schermate:

private route: ActivatedRoute
private router: Router

1) Parametri di routing richiesti:

2) Instradare i parametri opzionali:

3) Parametri query percorso:

4) È possibile utilizzare un servizio per passare i dati da un componente a un altro senza utilizzare i parametri di route.

Per un esempio, vedere: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Ne ho un plunker qui: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Esiste un nuovo metodo fornito con Angular 7.2.0

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

Spedire:

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

ricevere:

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

Puoi trovare alcune informazioni aggiuntive qui:

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

Il link sopra contiene questo esempio, cosa può essere utile: https://stackblitz.com/edit/angular-bupuzn

L'ultima versione di angolare (7.2 +) ora ha la possibilità di trasmettere informazioni aggiuntive usando NavigationExtras .

Componente domestico

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

Produzione

Spero che questo possa aiutare!

@ dev-nish Il tuo codice funziona con piccole modifiche. fare il

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

in

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

quindi se si desidera inviare in modo specifico un tipo di dati, ad esempio JSON a seguito della compilazione di un modulo, è possibile inviare i dati come spiegato in precedenza.

In navigateExtra possiamo passare solo un nome specifico come argomento, altrimenti mostra un errore come di seguito: Per Ex- Qui voglio passare la chiave cliente nella navigazione del router e passo così-

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

ma mostra alcuni errori come di seguito:

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'

.

Soluzione: dobbiamo scrivere così:

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

Il migliore che ho trovato su Internet per questo è ngx-navigation-with-data . È molto semplice e buono per la navigazione dei dati da un componente a un altro componente. Devi solo importare la classe del componente e usarla in modo molto semplice. Supponiamo che tu abbia la casa e il componente e che desideri inviare i dati

COMPONENTE DOMESTICO

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"});
 }

}

INFORMAZIONI SUL COMPONENTE

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() {
 }

}

Per qualsiasi domanda segui https://www.npmjs.com/package/ngx-navigation-with-data

Commenta per chiedere aiuto.