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

181

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.

Motomine
źródło
Myślę, że powinno być inaczej, jak w AngularJS, gdzie mogliśmy zrobić coś takiego jak $ state.go ('heroes', {some-data: "otherData"})
Motomine
3 proste sposoby udostępniania danych za pośrednictwem tras - angulartutorial.net/2017/12/ ...
Prashobh
Skorzystaj z mojego podejścia npmjs.com/package/ngx-navigation-with-data ostatni komentarz ode mnie, najlepszy dla wszystkich
Virendra Yadav

Odpowiedzi:

514

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:

wprowadź opis obrazu tutaj

2) Parametry opcjonalne trasy:

wprowadź opis obrazu tutaj

3) Parametry zapytania o trasę:

wprowadź opis obrazu tutaj

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

DeborahK
źródło
Dziękuję za Twoją odpowiedź! Jaka jest różnica między 2) a 3)? Ponieważ oba kończą się dodaniem „? Parameter =” w adresie URL. Czy mógłbyś podać przykład dla 4)? Nie wiem, jak to zrobić.
Motomine
Zaktualizowałem przez odpowiedź, aby pokazać różne adresy URL i podać link do posta na blogu i plunker na temat przekazywania danych za pomocą usługi. Adres URL różni się w przypadku parametrów opcjonalnych i parametrów zapytania, jak pokazano powyżej. Ponadto parametry zapytania mogą być zachowane na różnych trasach.
DeborahK
6
Mam również kurs Pluralsight na temat routingu, który obejmuje to wszystko: app.pluralsight.com/library/courses/angular-routing/ ... Jeśli chcesz uzyskać więcej informacji, możesz zapisać się na bezpłatny tydzień.
DeborahK
3
Dane są „udostępniane” tylko w ramach wykonywanej aplikacji. Jeśli użytkownik odświeży stronę, cała aplikacja zostanie ponownie załadowana z serwera, więc w aplikacji nie zostanie zachowany żaden stan wcześniejszy. Myślenie o tym w kategoriach normalnej aplikacji, gdy użytkownik odświeża się, przypomina zamykanie i ponowne otwieranie aplikacji. Jeśli chcesz zachować stan po odświeżeniu, będziesz musiał przechowywać go gdzieś, na przykład w lokalnej pamięci lub na serwerze.
DeborahK
2
Tylko mała wskazówka: routetyp to ActivatedRoutenie Router.
Arsen Khachaturyan
156

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

Véger Lóránd
źródło
11
To jest poprawna odpowiedź, biorąc pod uwagę nowe funkcje w Angular 7.
Randy,
2
Jak przy takim podejściu poradziłbym sobie z odświeżaniem przeglądarki przez użytkownika? W takim przypadku dane w dodatkach nawigacyjnych wydają się znikać, więc nie ma szans na ich ponowne użycie podczas odświeżania.
tobi_b,
1
@tobi_b Myślę, że masz rację, po odświeżeniu nie możesz do niego dotrzeć. Jeśli potrzebujesz tego po odświeżeniu, metody w zaakceptowanej odpowiedzi będą lepsze.
Véger Lóránd
3
Tak, dlatego w konstruktorze można pobrać dane tylko z this.router.getCurrentNavigation (). Jeśli potrzebujesz go w innym miejscu, np. W ngOnInit (), możesz uzyskać dostęp do koryta danych „history.state”. Z dokumentacji: „Stan przekazany do dowolnej nawigacji. Wartość ta będzie dostępna za pośrednictwem obiektu extras zwróconego z router.getCurrentNavigation () podczas wykonywania nawigacji. Po zakończeniu nawigacji ta wartość zostanie zapisana w history.state, gdy lokalizacja .go lub location.replaceState jest wywoływana przed aktywacją tej trasy. "
Véger Lóránd
8
Upewnij się również, że nie próbujesz ngOnInit()this.router.getCurrentNavigation().extras
odbierać
26

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

wprowadź opis obrazu tutaj

Mam nadzieję, że to pomoże!

dev-nish
źródło
1

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

Saurav Mohan V
źródło
0

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}});
A. PRABIN SARAB
źródło
-2

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.

Virendra Yadav
źródło
Czy przekazuje dane w postaci parametrów czy tylko w tle?
Marium Malik
Nie rozumiem @MariumMalik Czy możesz zapytać w sposób opisowy?
Virendra Yadav
Tak jest @MariumMalik
Virendra Yadav
3
Wygląda na to, że jesteś autorem tego, a nie „znalazłem w Internecie”? Jesteś również proszony o nie spamowanie w wątku Angular 7, który implementuje podobną funkcjonalność ( github.com/angular/angular/pull/27198 )
IrishDubGuy