Senden Sie Daten über Routing-Pfade in Angular

180

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.

Motomine
quelle
Ich denke, es sollte anders sein als in AngularJS, wo wir so etwas wie $ state.go ('Helden', {some-data: "otherData"})
Motomine
3 einfache Möglichkeiten, Daten über Routen zu teilen - angulartutorial.net/2017/12/…
Prashobh
Verwenden Sie meinen Ansatz npmjs.com/package/ngx-navigation-with-data letzter Kommentar von mir, am besten für alle
Virendra Yadav

Antworten:

511

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:

Geben Sie hier die Bildbeschreibung ein

2) Optionale Routenparameter:

Geben Sie hier die Bildbeschreibung ein

3) Routenabfrageparameter:

Geben Sie hier die Bildbeschreibung ein

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

DeborahK
quelle
Vielen Dank für Ihre Antwort! Was ist der Unterschied zwischen 2) und 3)? Weil beide am Ende "? Parameter =" in die URL einfügen. Können Sie mir ein Beispiel für die 4) geben? Ich kann nicht herausfinden, wie es geht.
Motomine
Ich habe per Antwort aktualisiert, um die verschiedenen URLs anzuzeigen und einen Link zu einem Blog-Beitrag und einem Plunker zum Weitergeben von Daten an einen Dienst bereitzustellen. Die URL unterscheidet sich mit optionalen und Abfrageparametern wie oben gezeigt. Außerdem können Abfrageparameter über Routen hinweg beibehalten werden.
DeborahK
5
Ich habe auch einen Pluralsight-Kurs zum Thema Routing, der all dies abdeckt : app.pluralsight.com/library/courses/angular-routing/… Sie können sich für eine kostenlose Woche anmelden, wenn Sie an weiteren Informationen interessiert sind.
DeborahK
3
Die Daten werden nur innerhalb der ausführenden Anwendung "geteilt". Wenn der Benutzer die Seite aktualisiert, wird die gesamte Anwendung vom Server neu geladen, sodass kein vorheriger Status in der Anwendung beibehalten wird. Wenn ein Benutzer im Sinne einer normalen Anwendung darüber nachdenkt, ist dies wie das Schließen und erneute Öffnen der Anwendung. Wenn Sie den Status nach einer Aktualisierung beibehalten müssen, müssen Sie ihn an einem Ort wie dem lokalen Speicher oder auf dem Server speichern.
DeborahK
2
Nur ein kleiner Hinweis: routeTyp ist ActivatedRoutenicht Router.
Arsen Khachaturyan
155

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

Véger Lóránd
quelle
11
Dies ist die richtige Antwort angesichts der neuen Funktionen in Angular 7.
Randy
2
Wie würde ich bei diesem Ansatz mit einer Browseraktualisierung durch den Benutzer umgehen? In diesem Fall scheinen die Daten in den Navigations-Extras zu verschwinden, sodass keine Möglichkeit besteht, sie beim Aktualisieren erneut zu verwenden.
tobi_b
1
@tobi_b Ich denke du hast recht, nach der Aktualisierung kannst du es nicht erreichen. Wenn Sie es nach der Aktualisierung benötigen, sind die Methoden in der akzeptierten Antwort besser.
Véger Lóránd
3
Ja, deshalb können Sie die Daten nur von this.router.getCurrentNavigation () im Konstruktor abrufen. Wenn Sie es an anderer Stelle wie in ngOnInit () benötigen, können Sie über "history.state" auf die Daten zugreifen. Aus der Dokumentation: "Status, der an eine Navigation übergeben wurde. Auf diesen Wert kann über das von router.getCurrentNavigation () zurückgegebene Extras-Objekt zugegriffen werden, während eine Navigation ausgeführt wird. Sobald eine Navigation abgeschlossen ist, wird dieser Wert in history.state geschrieben, wenn der Speicherort angegeben ist Die Methode .go oder location.replaceState wird aufgerufen, bevor diese Route aktiviert wird. "
Véger Lóránd
8
Stellen Sie außerdem sicher, dass Sie nicht versuchen, ein Extras-Objekt in ngOnInit()asthis.router.getCurrentNavigation().extras
hastrb
26

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

Geben Sie hier die Bildbeschreibung ein

Hoffe das würde helfen!

dev-nish
quelle
1

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

Saurav Mohan V.
quelle
0

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}});
A. PRABIN SARAB
quelle
-2

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.

Virendra Yadav
quelle
Überträgt es Daten in Form von Parametern oder nur im Hintergrund?
Marium Malik
Ich konnte @MariumMalik nicht verstehen. Kannst du bitte beschreibend fragen?
Virendra Yadav
Ja, es tut @MariumMalik
Virendra Yadav
3
Sie scheinen der Autor zu sein und nicht "Ich habe im Internet gefunden"? Sie werden auch gebeten, es nicht auf den Angular 7-Thread zu
spammen