कोणीय में मार्ग के माध्यम से डेटा भेजें

Question

राउटर के साथ डेटा भेजने के लिए वैसे भी क्या है। मेरा मतलब है, इस उदाहरण की तरह , जैसा कि आप देख सकते हैं कि मार्ग में डेटा पैरामीटर है, लेकिन ऐसा करने से यह काम नहीं कर रहा है:

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

क्योंकि कुछ-डेटा एक मान्य पैरामीटर नहीं है। मैं उसे कैसे कर सकता हूँ? मैं क्वेरीपैराम के साथ पैरामीटर नहीं भेजना चाहता।

Comments

मुझे लगता है कि यह एंगुलरजेएस की तरह होना चाहिए, जहां हम $ राज्य की तरह कुछ करने में सक्षम थे। ('हीरो', {कुछ-डेटा: "अन्यडेटा"})

— मोटोमिन

मार्गों के माध्यम से डेटा साझा करने के 3 सरल तरीके - angulartutorial.net/2017/12/12/…

— Prashobh

मेरे दृष्टिकोण का उपयोग करें npmjs.com/package/ngx-navigation-with-data मेरे द्वारा अंतिम टिप्पणी, सभी के लिए सर्वश्रेष्ठ

— वीरेंद्र यादव

Answer 1

इस विषय पर बहुत भ्रम है क्योंकि इसे करने के लिए बहुत सारे तरीके हैं।

निम्नलिखित स्क्रीन शॉट्स में उपयोग किए जाने वाले उपयुक्त प्रकार इस प्रकार हैं:

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

Comments

आपके उत्तर के लिए धन्यवाद! 2) और 3) में क्या अंतर है? क्योंकि दोनों URL में "पैरामीटर =" को जोड़ते हैं। क्या आप मुझे 4 के लिए एक उदाहरण दे सकते हैं)? मैं यह पता नहीं कर सकता कि यह कैसे करना है।

— मोटोमिन

मैंने विभिन्न URL दिखाने के लिए उत्तर दिया और एक ब्लॉग पोस्ट का लिंक प्रदान करने के लिए और एक सेवा के साथ डेटा पास करने के बारे में प्लंकर के लिए अपडेट किया। जैसा कि ऊपर दिखाया गया है वैकल्पिक और क्वेरी मापदंडों के साथ URL अलग है। प्लस क्वेरी पैरामीटर को मार्गों पर बनाए रखा जा सकता है।

— डेबोराह

मेरे पास रूटिंग पर एक प्लुरलइट कोर्स भी है जो इस सब को कवर करता है: app.pluralsight.com/library/courses/angular-rout/… यदि आप अधिक जानकारी में रुचि रखते हैं तो आप एक मुक्त सप्ताह के लिए साइन अप कर सकते हैं।

— डेबोराके जूल

डेटा निष्पादन एप्लिकेशन के भीतर केवल "साझा" है। यदि उपयोगकर्ता पृष्ठ को ताज़ा करता है, तो पूरे एप्लिकेशन को सर्वर से पुनः लोड किया जाता है, इसलिए एप्लिकेशन में कोई पूर्व स्थिति बरकरार नहीं रखी जाती है। एक सामान्य एप्लिकेशन के संदर्भ में इसके बारे में सोचना, जब कोई उपयोगकर्ता रिफ्रेश करता है तो यह एप्लिकेशन को बंद करने और फिर से खोलने जैसा होता है। यदि आपको रिफ्रेश होने के बाद राज्य को बनाए रखने की आवश्यकता होती है, तो आपको इसे कहीं स्टोर करने की आवश्यकता होगी जैसे कि स्थानीय भंडारण या सर्वर पर।

— डेबोराह

बस एक छोटा संकेत: routeप्रकार है ActivatedRoute, नहीं Router।

— आर्सेन खाचरौतन

Answer 2

एक नया तरीका है जो कि 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

Comments

यह सही उत्तर है जो नई विशेषताओं को कोणीय 7.

— रैंडी

इस दृष्टिकोण के साथ, मैं उपयोगकर्ता द्वारा ताज़ा किए गए ब्राउज़र को कैसे संभालूंगा? उस स्थिति में नेविगेशन एक्स्ट्रा में डेटा दूर चला जाता है, इसलिए इसे फिर से ताज़ा करने पर उपयोग करने का कोई मौका नहीं है।

— tobi_b

@tobi_b मुझे लगता है कि आप सही हैं, ताज़ा करने के बाद आप उस तक नहीं पहुँच सकते। यदि आपको ताज़ा करने के बाद इसकी आवश्यकता है, तो स्वीकृत उत्तर में तरीके बेहतर होंगे।

— वेगर लॉन्ड

हां, यही कारण है कि आप केवल निर्माणकर्ता में this.router.getCurrentNavigation () से डेटा प्राप्त कर सकते हैं। यदि आपको इसे ngOnInit () के अंदर कहीं और की आवश्यकता है, तो आप डेटा ट्रॉफ़ "history.state" तक पहुंच सकते हैं। दस्तावेज़ीकरण से: "राज्य किसी भी नेविगेशन में पारित हो गया। यह मान राऊटर से भूली गई एक्स्ट्रा ऑब्जेक्ट के माध्यम से सुलभ होगा। नेविगेशन परिक्रमण () एक नेविगेशन निष्पादित करते समय () जब एक नेविगेशन पूरा हो जाता है, तो यह मान उस स्थान पर history.state को लिखा जाएगा। .go या location.replaceState विधि को इस मार्ग को सक्रिय करने से पहले कहा जाता है। "

— Véger Lóránd

यह भी सुनिश्चित करें कि आप एक अतिरिक्त वस्तु को पुनः प्राप्त करने की कोशिश नहीं करते हैं ngOnInit()जैसेthis.router.getCurrentNavigation().extras

— hastrb

Answer 3

कोणीय का नवीनतम संस्करण (7.2 +) अब नेविगेशनएक्स्ट्रा का उपयोग करके अतिरिक्त जानकारी पास करने का विकल्प है ।

घर का घटक

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

उत्पादन

आशा है कि यह मदद करेगा!

Answer 4

@ dev-nish आपका कोड उनमें बहुत कम ट्विक्स के साथ काम करता है। कर

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

में

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

फिर यदि आप विशेष रूप से एक प्रकार का डेटा भेजना चाहते हैं, उदाहरण के लिए, JSON एक फॉर्म भर के परिणामस्वरूप आप उसी तरह से डेटा भेज सकते हैं जैसे पहले समझाया गया था।

Answer 5

नेविगेटएक्स्ट्रा में हम केवल कुछ विशिष्ट नाम को तर्क के रूप में पारित कर सकते हैं अन्यथा यह नीचे की तरह त्रुटि दिखा रहा है: For 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}});

Answer 6

इसके लिए मुझे इंटरनेट पर मिला बेस्ट एनजीएक्स-नेविगेशन-विथ डेटा है । यह एक घटक से दूसरे घटक के डेटा को नेविगेशन के लिए बहुत सरल और अच्छा है। आपको बस घटक वर्ग को आयात करना होगा और इसे बहुत सरल तरीके से उपयोग करना होगा। मान लें कि आपके पास घर और घटक के बारे में है और फिर डेटा भेजना चाहते हैं

घर घटक

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 पर जाएं

मदद के लिए नीचे टिप्पणी करें।

Comments

क्या यह डेटा को परम के रूप में या केवल पृष्ठभूमि में स्थानांतरित करता है?

— मैरियम मलिक

मैं समझ नहीं पाया @MariumMalik क्या आप कृपया विवरणात्मक तरीके से पूछ सकते हैं?

— वीरेंद्र यादव

हाँ यह @MariumMalik

— वीरेंद्र यादव

आप "मैं इंटरनेट पर पाया" के बजाय इस के लेखक प्रतीत होते हैं? आपसे यह भी पूछा जा रहा है कि इसे कोणीय 7 थ्रेड पर स्पैम न करें जो समान कार्यक्षमता को लागू करता है ( github.com/angular/angular/pull/27198 )

— आयरिशडबग्यू