Enviar datos a través de rutas de enrutamiento en Angular

¿Hay alguna forma de enviar datos como parámetro con router.navigate? Quiero decir, algo como este ejemplo, como puedes ver, la ruta tiene un parámetro de datos, pero al hacer esto no funciona:

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

porque algunos datos no son un parámetro válido. ¿Cómo puedo hacer eso? No quiero enviar el parámetro con queryParams.

Hay mucha confusión sobre este tema porque hay muchas formas diferentes de hacerlo.

Estos son los tipos apropiados utilizados en las siguientes capturas de pantalla:

private route: ActivatedRoute
private router: Router

1) Parámetros de enrutamiento necesarios:

2) Parámetros opcionales de ruta:

3) Parámetros de consulta de ruta:

4) Puede usar un servicio para pasar datos de un componente a otro sin usar parámetros de ruta.

Para ver un ejemplo, consulte: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Tengo un plunker de esto aquí: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Hay un nuevo método que vino con Angular 7.2.0

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

Enviar:

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

Recibir:

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

Puede encontrar información adicional aquí:

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

El enlace de arriba contiene este ejemplo, lo que puede ser útil: https://stackblitz.com/edit/angular-bupuzn

La última versión de angular (7.2 +) ahora tiene la opción de pasar información adicional usando NavigationExtras .

Componente de inicio

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

nuevoComponente

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

Salida

Espero que esto ayude!

@ dev-nish Su código funciona con pequeños ajustes en ellos. hacer el

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

dentro

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

entonces, si desea enviar específicamente un tipo de datos, por ejemplo, JSON como resultado de un formulario, puede enviar los datos de la misma manera que se explicó anteriormente.

En navigationExtra podemos pasar solo un nombre específico como argumento; de lo contrario, muestra un error como el siguiente: Por ejemplo, aquí quiero pasar la clave del cliente en la navegación del enrutador y paso así:

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

pero muestra algún error como el siguiente:

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'

.

Solución: tenemos que escribir así:

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

Lo mejor que encontré en Internet para esto es ngx-navigation-with-data . Es muy simple y bueno para navegar los datos de un componente a otro componente. Solo tiene que importar la clase de componente y usarla de manera muy simple. Supongamos que tiene un hogar y un componente y desea enviar datos

COMPONENTE DEL HOGAR

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

}

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

}

Para cualquier consulta, siga https://www.npmjs.com/package/ngx-navigation-with-data

Comenta abajo para pedir ayuda.