it-swarm.com.de

Daten über Routing-Pfade in Angular senden

Gibt es sowieso Daten als Parameter mit router.navigate zu senden? Ich meine, so etwas wie this Beispiel, wie Sie sehen können, hat die Route einen Datenparameter, aber das funktioniert nicht:

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

weil some-data kein gültiger Parameter ist. Wie kann ich das machen? Ich möchte den Parameter nicht mit queryParams senden.

116
Motomine

Es gibt viel Verwirrung in 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:

enter image description here

2) Optionale Parameter weiterleiten:

enter image description here

3) Routenabfrageparameter:

enter image description here

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 einen Plunker davon hier: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

351
DeborahK

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 Sie:

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

Hier können Sie zusätzliche Informationen abrufen:

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

66
Véger Lóránd

Die neueste Version von angular (7.2 +) hat jetzt die Option, zusätzliche Informationen mit NavigationExtras zu übergeben.

Ausgangskomponente

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

enter image description here

Hoffe das würde helfen!

8
dev-nish

Sie können dies verwenden. Angular2 +/4/5 - Mit Daten navigieren https://github.com/Hipparch/Angular2-navigate-with-data

6

Das Beste, was ich im Internet gefunden habe, ist ngx-navigation-with-data . 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 zu Hause und über die Komponente und möchten dann Daten senden

HEIMKOMPONENTE

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

Bitte um Hilfe.

0
Virendra Yadav

@ dev-nish Ihr 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 einen bestimmten Datentyp senden möchten, z. B. JSON als Ergebnis einer Formularausfüllung, können Sie die Daten auf die zuvor beschriebene Weise senden.

0
Saurav Mohan V