Gegevens verzenden via routeringspaden in Angular

Is er een manier om gegevens als parameter te verzenden met router.navigate?
Ik bedoel, zoiets als ditvoorbeeld, zoals je kunt zien heeft de route een dataparameter, maar als ik dit doe, werkt het niet:

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

omdat some-data geen geldige parameter is. Hoe kan ik dat doen? Ik wil de parameter niet verzenden met queryParams.

Antwoord 1, autoriteit 100%

Er is veel verwarring over dit onderwerp omdat er zoveel verschillende manieren zijn om het te doen.

Hier zijn de juiste typen die worden gebruikt in de volgende schermafbeeldingen:

private route: ActivatedRoute
private router: Router

1) Vereiste routeringsparameters:

2) Optionele routeparameters:

3) Routequeryparameters:

4) U kunt een service gebruiken om gegevens van de ene component naar de andere door te geven zonder dat u routeparameters hoeft te gebruiken.

Voor een voorbeeld zie: https: //blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Ik heb hier een plunker van: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9? p=preview

Antwoord 2, autoriteit 46%

Er is een nieuwe methode die bij Angular 7.2.0 is geleverd

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

Verzenden:

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

Ontvangen:

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

Je kunt hier aanvullende informatie vinden:

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

De link hierboven bevat dit voorbeeld dat handig kan zijn:
https://stackblitz.com/edit/angular-bupuzn

Antwoord 3, autoriteit 8%

De nieuwste versie van hoekig (7.2+) heeft nu de mogelijkheid om aanvullende informatie door te geven met behulp van NavigationExtras.

Thuiscomponent

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

Uitvoer

Ik hoop dat dit zou helpen!