কৌণিকের রাউটিং পাথগুলির মাধ্যমে ডেটা প্রেরণ করুন

Question

রাউটার.ন্যাভিগেটের সাথে প্যারামিটার হিসাবে ডেটা প্রেরণে কি আছে? আমি বলতে চাচ্ছি, ভালো কিছু এই উদাহরণ, হিসাবে আপনি দেখতে পারেন রুট একটি ডাটা প্যারামিটার আছে, কিন্তু এই কাজ এটি কাজ না করে:

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

কারণ কিছু ডেটা বৈধ প্যারামিটার নয়। আমি এটা কিভাবে করবো? আমি ক্যোয়ারপ্যারামগুলি সহ প্যারামিটারটি পাঠাতে চাই না।

Comments

আমি মনে করি এটি অন্যভাবে অ্যাংুলারজেএস-এর মতো হওয়া উচিত, যেখানে আমরা $ state.go ('নায়কদের', {কিছু ডেটা: "অন্য ডেটা" do) এর মতো কিছু করতে সক্ষম হয়েছি

— 55

ডেটা ভাগ করুন 3 সহজ উপায় যাত্রাপথ মাধ্যমে - angulartutorial.net/2017/12/...

— Prashobh

আমার পন্থাটি npmjs.com/package/ngx-navication-with-data ব্যবহার করে আমার দ্বারা শেষ মন্তব্য, সবার জন্য সেরা

— বীরেন্দ্র যাদব

Answer 1

এই বিষয়টি নিয়ে প্রচুর বিভ্রান্তি রয়েছে কারণ এটি করার বিভিন্ন উপায় রয়েছে।

নিম্নলিখিত স্ক্রিন শটগুলিতে যথাযথ প্রকারগুলি ব্যবহৃত হচ্ছে:

private route: ActivatedRoute
private router: Router

1) প্রয়োজনীয় রাউটিং পরামিতি:

2) রুট ptionচ্ছিক পরামিতি:

3) রুট ক্যোয়ারী প্যারামিটারগুলি:

৪) আপনি রুট প্যারামিটারগুলি ব্যবহার না করেই কোনও উপাদান থেকে অন্য উপাদানকে ডেটা পাস করার জন্য একটি পরিষেবা ব্যবহার করতে পারেন।

উদাহরণস্বরূপ দেখুন: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

আমার এখানে এটির একটি উত্সাহী রয়েছে: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p= পূর্বরূপ

Comments

আপনার উত্তর করার জন্য আপনাকে ধন্যবাদ! 2) এবং 3) এর মধ্যে পার্থক্য কী? কারণ উভয়ই ইউআরএলে "? পরামিতি =" যুক্ত করে। আপনি কি আমাকে 4 এর জন্য উদাহরণ দিতে পারেন? কীভাবে করব তা আমি বুঝতে পারি না।

— মোটোমাইন

আমি বিভিন্ন ইউআরএলগুলি দেখানোর জন্য এবং কোনও পরিষেবার সাথে কীভাবে ডেটা পাস করতে পারি সে সম্পর্কে কোনও ব্লগ পোস্ট এবং প্লঙ্কারকে একটি লিঙ্ক সরবরাহ করতে উত্তর দিয়ে আপডেট করেছি। উপরে বর্ণিত optionচ্ছিক এবং ক্যোয়ারী প্যারামিটারগুলির সাথে URL টি আলাদা। প্লাস ক্যোয়ারী প্যারামিটারগুলি সমস্ত রুট ধরে ধরে রাখা যেতে পারে।

— দেবোরাহকে

আমার এই রাউটিংয়ের ক্ষেত্রে একটি বহুবর্ণের পাঠ্যক্রমও রয়েছে যা এই সমস্তগুলি কভার করে: app.pluralsight.com/library/courses/angular-routing/… আপনি যদি আরও তথ্যে আগ্রহী হন তবে আপনি একটি ফ্রি সপ্তাহের জন্য সাইন আপ করতে পারেন।

— দেবোরাহকে

এক্সিকিউটিভ অ্যাপ্লিকেশনটির মধ্যে ডেটা কেবল "ভাগ" করা হয়। যদি ব্যবহারকারী পৃষ্ঠাটি রিফ্রেশ করে তবে পুরো অ্যাপ্লিকেশনটি সার্ভার থেকে পুনরায় লোড করা হবে, সুতরাং অ্যাপ্লিকেশনটিতে কোনও পূর্বের অবস্থা বজায় থাকে না। এটি কোনও সাধারণ অ্যাপ্লিকেশন হিসাবে বিবেচনা করা যখন কোনও ব্যবহারকারী সতেজ করে তা অ্যাপ্লিকেশনটি বন্ধ এবং পুনরায় খোলার মতো। যদি আপনাকে একটি রিফ্রেশের পরে রাষ্ট্র ধরে রাখতে হয় তবে আপনার এটি অন্য কোথাও যেমন স্থানীয় সঞ্চয়স্থান বা সার্ভারে সঞ্চয় করতে হবে।

— ডিবোরাহেকে

শুধু একটি ছোট ইঙ্গিত: routeটাইপ হয় ActivatedRoute, না Router।

— আর্সেন খাচাতুরিয়ান

Answer 2

কৌণিক .2.২.০ নিয়ে একটি নতুন পদ্ধতি রয়েছে

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

পাঠান:

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

recieve:

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

@ টোবি_বি আমি মনে করি আপনি ঠিক বলেছেন, রিফ্রেশ করার পরে আপনি এটি পৌঁছাতে পারবেন না। রিফ্রেশ করার পরে আপনার যদি এটির প্রয়োজন হয় তবে গৃহীত উত্তরের পদ্ধতিগুলি আরও ভাল।

— ভিজার লরেন্ড

হ্যাঁ, এজন্য আপনি কেবল কনস্ট্রাক্টরের মধ্যে এই.আউটটার.জেটকারেন্টনাভিগেশন () থেকে ডেটা পেতে পারেন। NgOnInit () এর মতো অন্য কোথাও আপনার যদি এটির প্রয়োজন হয় তবে আপনি ডেটা ট্রাট "ইতিহাস.স্টেট" অ্যাক্সেস করতে পারেন। ডকুমেন্টেশন থেকে: "স্টেটটি কোনও নেভিগেশনে চলে গেছে rou রাউটার থেকে ফিরে আসা অতিরিক্ত বস্তুর মাধ্যমে এই মানটি অ্যাক্সেসযোগ্য হবে get .go বা লোকেশন.রেপসেট স্টেট পদ্ধতিটিকে এই রুটটি সক্রিয় করার আগে ডাকা হয় ""

— ভিজার লরেন্ড

এছাড়াও নিশ্চিত করুন যে আপনি কোনও অতিরিক্ত বস্তু ngOnInit()যেমনthis.router.getCurrentNavigation().extras

— হেলস্টব

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

@ দেব-নিশ আপনার কোডগুলি এতে সামান্য টুইটের সাথে কাজ করে। করা

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

মধ্যে

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

তারপরে আপনি যদি নির্দিষ্টভাবে কোনও প্রকারের ডেটা প্রেরণ করতে চান, উদাহরণস্বরূপ, ফর্ম পূরণের ফলস্বরূপ জেএসওএন আপনি পূর্বের বর্ণনার মতো একইভাবে ডেটা প্রেরণ করতে পারবেন।

Answer 5

নেভিগেটএক্স্ট্রায় আমরা যুক্তি হিসাবে কেবলমাত্র কোনও নির্দিষ্ট নামটি পাস করতে পারি অন্যথায় এটি নীচের মতো ত্রুটি দেখায়: প্রাক্তনদের জন্য - এখানে আমি রাউটার নেভিগেটে গ্রাহক কীটি পাস করতে চাই এবং আমি এইভাবে পাস করি-

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-navication-with-data অনুসরণ করুন

সাহায্যের জন্য মন্তব্য করুন।

Comments

এটি কি প্যারাম আকারে বা কেবল পটভূমিতে ডেটা স্থানান্তর করে?

— মেরিয়াম মালিক

আমি বুঝতে পারি নি @ মারিয়াম ম্যালিক আপনি কি দয়া করে একটি বর্ণনামূলক পদ্ধতিতে জিজ্ঞাসা করতে পারেন?

— বীরেন্দ্র যাদব

হ্যাঁ এটি @ মারিয়ুমমালিক করেন

— বীরেন্দ্র যাদব

আপনি "ইন্টারনেটে খুঁজে পেয়েছি" পরিবর্তে আপনি এর লেখক হিসাবে উপস্থিত হন? আপনাকে একই ধরণের কার্যকারিতা ( github.com/angular/angular/pull/27198 ) প্রয়োগ করে কৌণিক 7 থ্রেডে এটি স্প্যাম না করার জন্যও জিজ্ঞাসা করা হয়েছে

— আইরিশডাব গুয়