Wysyłaj dane przez ścieżki routingu w Angular

Czy w ogóle jest przesyłanie danych jako parametru za pomocą router.navigate? Mam na myśli coś takiego jak ten przykład, jak widać trasa ma parametr danych, ale robiąc to nie działa:

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

ponieważ niektóre dane nie są prawidłowym parametrem. Jak mogę to zrobić? Nie chcę wysyłać parametru z queryParams.

W tym temacie jest wiele nieporozumień, ponieważ można to zrobić na wiele różnych sposobów.

Oto odpowiednie typy użyte na poniższych zrzutach ekranu:

private route: ActivatedRoute
private router: Router

1) Wymagane parametry routingu:

2) Parametry opcjonalne trasy:

3) Parametry zapytania o trasę:

4) Możesz użyć usługi do przekazywania danych z jednego komponentu do drugiego bez używania parametrów trasy.

Na przykład patrz: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Mam plunker tego tutaj: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

W Angular 7.2.0 pojawiła się nowa metoda

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

Wysłać:

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

Odbierz:

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

Tutaj możesz znaleźć dodatkowe informacje:

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

Powyższy link zawiera ten przykład, co może być przydatne: https://stackblitz.com/edit/angular-bupuzn

Najnowsza wersja angular (7.2 +) ma teraz opcję przekazywania dodatkowych informacji za pomocą NavigationExtras .

Komponent domowy

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

Wynik

Mam nadzieję, że to pomoże!

@ dev-nish Twój kod działa z niewielkimi poprawkami. Zrób

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

w

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

wtedy jeśli chcesz konkretnie wysłać typ danych, na przykład JSON w wyniku wypełnienia formularza, możesz przesłać dane w taki sam sposób, jak wyjaśniono wcześniej.

W navigateExtra możemy przekazać tylko jakąś konkretną nazwę jako argument, w przeciwnym razie pokazuje błąd jak poniżej: Dla Ex- Tutaj chcę przekazać klucz klienta w nawigacji routera i przekazuję w ten sposób-

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

ale pokazuje błąd, jak poniżej:

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'

.

Rozwiązanie: musimy napisać tak:

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

Najlepsze, jakie znalazłem w internecie, to ngx-navigation-with-data . Jest to bardzo proste i dobre do nawigacji danych z jednego komponentu do drugiego. Musisz po prostu zaimportować klasę komponentów i używać jej w bardzo prosty sposób. Załóżmy, że masz dom i komponent, a następnie chcesz wysłać dane

KOMPONENT DOMOWY

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

}

O KOMPONENTACH

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

}

W przypadku każdego zapytania postępuj zgodnie z https://www.npmjs.com/package/ngx-navigation-with-data

Skomentuj, aby uzyskać pomoc.