Надсилання даних через маршрутизацію в Angular


181

Чи все ж є можливість надсилати дані як параметр за допомогою router.navigate? Я маю на увазі щось подібне до цього прикладу, як ви бачите, що маршрут має параметр даних, але це не працює:

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

оскільки деякі дані не є допустимим параметром. Як я можу це зробити? Я не хочу надсилати параметр queryParams.


Я думаю, що це має бути інакше, як у AngularJS, де нам вдалося зробити щось на кшталт $ state.go ('герої', {some-data: "otherData"})
Motomine

3 прості способи обміну даними через маршрути - angulartutorial.net/2017/12/…
Прашобх

Скористайтеся моїм підходом npmjs.com/package/ngx-navigation-with-data останній коментар від мене, найкращий для всіх
Virendra Yadav

Відповіді:


514

На цю тему дуже багато плутанини, тому що існує так багато різних способів зробити це.

Ось відповідні типи, які використовуються на наступних знімках екрана:

private route: ActivatedRoute
private router: Router

1) Обов'язкові параметри маршрутизації:

введіть тут опис зображення

2) Додаткові параметри маршруту:

введіть тут опис зображення

3) Параметри запиту маршруту:

введіть тут опис зображення

4) Ви можете використовувати послугу для передачі даних від одного компонента до іншого, не використовуючи параметрів маршруту взагалі.

Для прикладу див.: Https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

У мене тут є викрадник: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview


Спасибі за вашу відповідь! Яка різниця між 2) та 3)? Тому що обидва в кінцевому підсумку додають "? Parameter =" в URL. Чи можете ви надати мені приклад для 4)? Я не можу зрозуміти, як це зробити.
Мотомін

Я оновив відповіддю, щоб показати різні URL-адреси та надати посилання на допис у блозі та планкер про те, як передавати дані сервісом. URL-адреса відрізняється додатковими параметрами та параметрами запиту, як показано вище. Плюс параметри запиту можуть зберігатися в різних маршрутах.
DeborahK

6
У мене також є курс Pluralsight з маршрутизації, який охоплює все це: app.pluralsight.com/library/courses/angular-routing/… Ви можете зареєструватися на безкоштовний тиждень, якщо вас зацікавить додаткова інформація.
DeborahK

3
Дані "спільно використовуються" лише у виконанні програми. Якщо користувач оновлює сторінку, вся програма перезавантажується з сервера, тому в додатку не зберігається попередній стан. Думати про це з точки зору звичайної програми, коли користувач оновлює це, як закриття та повторне відкриття програми. Якщо після оновлення вам потрібно зберегти стан, вам потрібно буде зберігати його десь, наприклад, у локальному сховищі або на сервері.
ДебораК

2
Лише невеликий натяк: routeтип є ActivatedRoute, ні Router.
Арсен Хачатурян

156

Існує новий метод, що з'явився разом з Angular 7.2.0

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

Надіслати:

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

Отримайте:

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

Тут можна подати додаткову інформацію:

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

Посилання вище містить цей приклад, що може бути корисним: https://stackblitz.com/edit/angular-bupuzn


11
Це правильна відповідь, враховуючи нові функції у
Ренді

2
Як при такому підході я б обробляв оновлення браузера користувачем? У такому випадку дані в додатках для навігації, здається, відходять, тому немає можливості використовувати їх знову при оновленні.
tobi_b

1
@tobi_b Я думаю, що ти маєш рацію, після оновлення ти не можеш досягти цього. Якщо вам це потрібно після оновлення, методи у прийнятій відповіді будуть кращими.
Véger Lóránd

3
Так, тому ви можете отримати дані лише з конструктора this.router.getCurrentNavigation () у конструкторі. Якщо вам це потрібно в іншому місці, як всередині ngOnInit (), ви можете отримати доступ до даних через "history.state". З документації: "Держава передається будь-якій навігації. Це значення буде доступне через об'єкт додатків, повернутий з router.getCurrentNavigation () під час виконання навігації. Після завершення навігації це значення запишеться в history.state, коли розташування буде .go або location.replaceState викликається методом перед активацією цього маршруту. "
Véger Lóránd

8
Крім того, переконайтеся , що ви не намагаєтеся Отримувати об'єкт статистів , ngOnInit()якthis.router.getCurrentNavigation().extras
hastrb

26

Остання версія кутового (7.2 +) тепер має можливість передавати додаткову інформацію за допомогою NavigationExtras .

Головна складова

import {
  Router,
  NavigationExtras
} from '@angular/router';
const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};
this.router.navigate(['newComponent'], navigationExtras);

новийкомпонент

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

Вихідні дані

введіть тут опис зображення

Сподіваюся, це допоможе!


1

@ dev-nish Ваш код працює з невеликими налаштуваннями. зробити

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

в

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

тоді, якщо ви хочете спеціально надіслати тип даних, наприклад, JSON в результаті заповнення форми, ви можете надіслати дані так само, як пояснено раніше.


0

У navigateExtra ми можемо передавати лише якесь конкретне ім'я як аргумент, інакше воно відображає помилку, як показано нижче: Для Ex- Тут я хочу передати ключ клієнта у навігаційному маршрутизаторі, і я пройду так:

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

але вона відображає помилку, як показано нижче:

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'

.

Рішення: ми повинні писати так:

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

-2

Найкраще, що я знайшов для цього в Інтернеті, це ngx-navigation-with-data . Це дуже просто і добре для навігації даних з одного компонента в інший компонент. Вам потрібно просто імпортувати клас компонентів і використовувати його дуже просто. Припустимо, у вас є домашній і про компонент і хочете потім надіслати дані

ДОМАШНИЙ КОМПОНЕНТ

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

}

ПРО КОМПОНЕНТ

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

}

Для будь-якого запиту читайте https://www.npmjs.com/package/ngx-navigation-with-data

Прокоментуйте допомогу.


Чи передає він дані у формі парами чи просто у фоновому режимі?
Маріум Малік

Я не міг зрозуміти @MariumMalik Чи можете ви, будь ласка, запитати описово?
Вірендра Ядав

Так, це @MariumMalik
Yadav

3
Ви, здається, є автором цього, а не "Я знайшов в Інтернеті"? Вас також просять не спамувати його на потоку Angular 7, який реалізує подібну функціональність ( github.com/angular/angular/pull/27198 )
IrishDubGuy
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.