Senden Sie Daten über Routing-Pfade in Angular

Gibt es überhaupt eine Möglichkeit, Daten als Parameter mit router.navigate zu senden? Ich meine, so etwas wie dieses Beispiel, wie Sie sehen können, hat die Route einen Datenparameter, aber dies funktioniert nicht:

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

weil einige Daten kein gültiger Parameter sind. Wie kann ich das machen? Ich möchte den Parameter nicht mit queryParams senden.

Es gibt viel Verwirrung zu diesem Thema, weil es so viele verschiedene Möglichkeiten gibt, dies zu tun.

In den folgenden Screenshots werden die entsprechenden Typen verwendet:

private route: ActivatedRoute
private router: Router

1) Erforderliche Routing-Parameter:

2) Optionale Routenparameter:

3) Routenabfrageparameter:

4) Sie können einen Dienst verwenden, um Daten von einer Komponente an eine andere zu übergeben, ohne Routenparameter zu verwenden.

Ein Beispiel finden Sie unter: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Ich habe hier einen Plunker davon: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Es gibt eine neue Methode, die mit Angular 7.2.0 geliefert wurde

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

Senden:

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

Erhalten:

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

Hier können Sie einige zusätzliche Informationen finden:

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

Der obige Link enthält dieses Beispiel, was nützlich sein kann: https://stackblitz.com/edit/angular-bupuzn

Die neueste Version von Angular (7.2 +) bietet jetzt die Möglichkeit, zusätzliche Informationen mithilfe von NavigationExtras zu übergeben .

Hauptkomponente

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

Ausgabe

Hoffe das würde helfen!

@ dev-nish Dein Code funktioniert mit kleinen Änderungen. mach das

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

in

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

Wenn Sie dann speziell einen Datentyp senden möchten, z. B. JSON als Ergebnis eines Formularausfüllens, können Sie die Daten auf die gleiche Weise wie zuvor beschrieben senden.

In navigExtra können wir nur einen bestimmten Namen als Argument übergeben, andernfalls wird ein Fehler wie unten angezeigt: Zum Beispiel möchte ich hier den Kundenschlüssel in der Routernavigation übergeben und ich übergebe wie folgt:

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

aber es zeigt einen Fehler wie unten:

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'

.

Lösung: Wir müssen so schreiben:

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

Das Beste, was ich im Internet dafür gefunden habe, ist ngx-Navigation mit Daten . Es ist sehr einfach und gut für die Navigation der Daten von einer Komponente zu einer anderen Komponente. Sie müssen nur die Komponentenklasse importieren und auf sehr einfache Weise verwenden. Angenommen, Sie haben eine Home- und About-Komponente und möchten dann Daten senden

HAUSKOMPONENTE

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

}

ÜBER KOMPONENTE

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

}

Bei Fragen folgen Sie https://www.npmjs.com/package/ngx-navigation-with-data

Kommentar nach unten für Hilfe.