Envie dados pelos caminhos de roteamento no Angular

Existe alguma maneira de enviar dados como parâmetro com router.navigate? Quero dizer, algo como este exemplo, como você pode ver a rota tem um parâmetro de dados, mas fazer isso não está funcionando:

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

porque some-data não é um parâmetro válido. Como eu posso fazer isso? Não quero enviar o parâmetro com queryParams.

Há muita confusão sobre esse tópico porque existem muitas maneiras diferentes de fazer isso.

Aqui estão os tipos apropriados usados ​​nas seguintes capturas de tela:

private route: ActivatedRoute
private router: Router

1) Parâmetros de roteamento necessários:

2) Parâmetros opcionais da rota:

3) Parâmetros de consulta de rota:

4) Você pode usar um serviço para passar dados de um componente para outro sem usar parâmetros de rota.

Para obter um exemplo, consulte: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Eu tenho um plunker disso aqui: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Existe um novo método que veio com o Angular 7.2.0

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

Enviar:

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

Receber:

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

Você pode obter algumas informações adicionais aqui:

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

O link acima contém este exemplo, o que pode ser útil: https://stackblitz.com/edit/angular-bupuzn

A versão mais recente do angular (7.2 +) agora tem a opção de passar informações adicionais usando o NavigationExtras .

Componente inicial

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

Resultado

Espero que isso ajude!

@ dev-nish Seu código funciona com pequenos ajustes neles. faça o

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

para dentro

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

se desejar enviar especificamente um tipo de dados, por exemplo, JSON como resultado de um preenchimento de formulário, você poderá enviar os dados da mesma maneira como explicado anteriormente.

Em navigateExtra, podemos passar apenas algum nome específico como argumento, caso contrário, ele mostra um erro como abaixo: Por exemplo, aqui quero passar a chave do cliente no roteador navigate e passo assim-

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

mas mostrando algum erro como abaixo:

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'

.

Solução: temos que escrever assim:

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

O melhor que encontrei na internet para isso é o ngx-navigation-with-data . É muito simples e bom para navegar nos dados de um componente para outro. Você precisa apenas importar a classe de componente e usá-la de maneira muito simples. Suponha que você tenha um componente residencial e sobre o qual deseja enviar dados.

COMPONENTE EM CASA

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 O 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 qualquer consulta, siga https://www.npmjs.com/package/ngx-navigation-with-data

Comente para obter ajuda.