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

rutas angular 4

Question

¿Hay alguna forma de enviar datos como parámetro con router.navigate? Quiero decir, algo como this 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.

Answer 1

@ 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.

Answer 2

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

Answer 3

Hay un nuevo método que viene 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

Answer 4

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!

Answer 5

Lo mejor que encontré en Internet para esto es npmjs.com/package/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 npmjs.com/package/ngx-navigation-with-data

Comenta abajo para pedir ayuda.

Answer 6

Puedes usar esto. Angular2 + / 4/5: navegue con datos https://github.com/Hipparch/Angular2-navigate-with-data