আমি কৌনিক রাউন্ড উপাদানগুলিতে ডেটা কীভাবে পাস করব?

Question

আমার কৌণিক 2 রুটের টেম্পলেটগুলির একটিতে ( ফার্স্ট কম্পোনেন্ট ) আমার একটি বোতাম আছে

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

আমার লক্ষ্য অর্জন:

বাটনে ক্লিক করুন -> ডেটা সংরক্ষণের সময় এবং নির্দেশক হিসাবে অন্য উপাদানটি ব্যবহার না করেই অন্য কোনও উপাদানে যান route

এটাই আমি চেষ্টা করেছিলাম ...

1 ম প্রচার

একই দৃশ্যে আমি ব্যবহারকারীর মিথস্ক্রিয়ার ভিত্তিতে একই ডেটা সংগ্রহ করতে সঞ্চয় করছি।

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

সাধারণত আমি রুট চাই SecondComponent দ্বারা

 this._router.navigate(['SecondComponent']);

অবশেষে দ্বারা তথ্য পাস

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

যদিও পরামিতিগুলির সাথে লিঙ্কটির সংজ্ঞা থাকবে

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

এই পদ্ধতির সমস্যাটি হ'ল আমি অনুমান করি যে আমি জটিল ডেটা (যেমন সম্পত্তি 3 এর মতো কোনও বস্তু ) ইন-ইউআরএল পাস করতে পারি না ;

2ND প্রচার

ফার্স্ট কম্পোনেন্টে নির্দেশনা হিসাবে দ্বিতীয় বিকল্পকে অন্তর্ভুক্ত করার বিকল্প থাকবে ।

  <SecondComponent [p3]="property3"></SecondComponent>

তবে আমি চাই রুট উপাদানে না এটা অন্তর্ভুক্ত!

3 আরডি অ্যাপ্রোচ

আমি এখানে দেখতে সবচেয়ে কার্যকর সমাধানটি হ'ল কোনও পরিষেবা (উদাহরণস্বরূপ ফার্স্ট কম্পোমেনট সার্ভিস) ব্যবহার করা

• সংরক্ষণ FirstComponent ডাটা routeWithData উপর (_firstComponentService.storeData ()) ()
• উদ্ধার তথ্য (_firstComponentService.retrieveData ()) ngOnInit () মধ্যে SecondComponent

যদিও এই পদ্ধতিরটিকে পুরোপুরি কার্যকর মনে হচ্ছে, আমি লক্ষ্য করি যে এটি লক্ষ্য অর্জনের সবচেয়ে সহজ / সবচেয়ে মার্জিত উপায় কিনা।

সাধারণভাবে আমি জানতে চাই যে উপাদানগুলির মধ্যে ডেটা পাস করার জন্য আমি অন্যান্য সম্ভাব্য পন্থাগুলি মিস করছি কিনা , বিশেষত কোডের কম সম্ভাব্য পরিমাণের সাথে

Comments

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

— Prashobh

ধন্যবাদ @ প্রশভ। Pass data using Query Parametersআমি যা খুঁজছিলাম আপনার লিঙ্কটি আমার দিনকে বাঁচিয়েছে।

— রাজ

কৌণিক .2.২ আরও তথ্যের জন্য জনসংযোগstate পরীক্ষা করে রুটগুলির মধ্যে ডেটা পাস করার জন্য নতুন বৈশিষ্ট্য রয়েছে । এখানে কিছু দরকারী তথ্য

— আজিজকাপপ্রোগ

@ প্রশভ অনেক ধন্যবাদ আপনি যে লিঙ্কটি ভাগ করেছেন তা খুব দরকারী

— ভেন্ডু

Answer 1

আপডেট 4.0.0

আরও তথ্যের জন্য কৌনিক ডকগুলি দেখুন https://angular.io/guide/router#fetch-data-before-navigating

মূল

কোনও পরিষেবা ব্যবহার করা উপায়। রুট প্যারামগুলিতে আপনার কেবলমাত্র ডেটা পাস করা উচিত যা আপনি ব্রাউজারের URL বারে প্রতিবিম্বিত হতে চান।

Https://angular.io/docs/ts/latest/cookbook/comp घटक- communication.html#!# দ্বিদ্বিদ্বিতীয়- পরিষেবাটি দেখুন

আরসি ৪ সহ প্রেরিত রাউটারটি পুনরায় পরিচয় করিয়ে দেয় data

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

এ আরও দেখুন Plunker https://github.com/angular/angular/issues/9757#issuecomment-229847781

Comments

এই উত্তরটি এখনও কৌনিক 2.1.0 এর জন্য বৈধ?

— স্মার্টমাউস

আরসি .৪ রাউটার ডেটা কেবল স্থির ডেটার জন্য। আপনি একই রুটে বিভিন্ন ডেটা প্রেরণ করতে পারবেন না সবসময় একই ডেটা থাকতে হবে আমি কি ভুল?

— অ্যাকানাদাল

না, এই ব্যবহারের ক্ষেত্রে একটি ভাগ করা পরিষেবা ব্যবহার করুন।

— গন্টার জ্যাচবাউর 19

কৌণিক 5 এ, যাইহোক, আপনার পক্ষে সক্ষম হওয়া উচিত ... ngOnInit() { this.myVar = this.route.snapshot.data['some_data']; }

— রজার

আপনি কৌণিক v7.2 ব্যবহার করতে পারবেন হন, তাহলে এটি ব্যবহার রাউটার এখন রাষ্ট্র ক্ষণস্থায়ী জন্য করতে পারবেন NavigationExtras- stackoverflow.com/a/54879389/1148107

— mtpultz

Answer 2

আমি মনে করি যেহেতু আমাদের কৌণিক ২ তে কৌনিক ১.x এর মতো রুটস্কোপ ধরণের জিনিস নেই। আমরা এনজিওএনডাস্ট্রয়ে থাকাকালীন কৌনিক 2 শেয়ার্ড সার্ভিস / ক্লাস ব্যবহার করতে পারি এবং রাউটিংয়ের পরে এনজিওনইনাইট ফাংশনে পরিষেবাটি থেকে ডেটা নিই :

এখানে আমি নায়ক অবজেক্টটি শেয়ার করতে ডেটা সার্ভিস ব্যবহার করছি:

import { Hero } from './hero';
export class DataService {
  public hero: Hero;
}

প্রথম পৃষ্ঠার উপাদান থেকে পাস অবজেক্ট:

 ngOnDestroy() {
    this.dataService.hero = this.hero; 
 }

দ্বিতীয় পৃষ্ঠার উপাদান থেকে অবজেক্ট নিন:

 ngOnInit() {
    this.hero = this.dataService.hero; 
 }

এখানে একটি উদাহরণ: plunker

Comments

এটি সুন্দর তবে এনজি 2 সম্প্রদায়ের মধ্যে এটি কতটা সাধারণ? আমি ডক্সে এটি পড়ে মনে করতে পারি না ...

— আলফা ব্রাভো

ইউআরএল প্যারামিটার বা অন্যান্য ব্রাউজার স্টোরেজের মতো অন্য বিকল্পের সাথে তুলনা করা এটি আমার কাছে ভাল বলে মনে হয়। আমি এরকম কাজ করার জন্য কোনও ডকুমেন্টেশনেও দেখিনি।

— উৎপল কুমার দাশ

যখন ব্যবহারকারী কোনও নতুন ট্যাব খুলবে এবং দ্বিতীয় উপাদান রুটটি অনুলিপি করুন তখন কি এটি কাজ করে? আমি আনতে সক্ষম করতে পারি this.hero = this.dataService.hero? আমি কি মূল্যবোধ পাব?

এটি প্রকৃতপক্ষে খুব সহজ এবং প্রতিটি কৌণিক বিকাশকারী জানেন তবে সমস্যাটি হ'ল একবার আপনি পরিষেবাগুলিতে looseিলে .ালা ডেটা রিফ্রেশ করুন। ব্যবহারকারীকে সমস্ত স্টাফ আবার করতে হবে।

— সন্তোষ কদম

@ সন্তোষকদম প্রশ্নটি হল "আমি কৌনিক রাউন্ডের উপাদানগুলিতে ডেটা কীভাবে প্রেরণ করব?" সুতরাং ngOnDestroy এবং ngOnInit ফাংশন দ্বারা ডেটা পাস করা একটি উপায়, এবং সর্বদা সহজ সেরা। যদি ব্যবহারকারীকে পুনরায় লোডের পরে ডেটা পাওয়ার প্রয়োজন হয় তবে স্থায়ী স্টোরেজে ডেটা সংরক্ষণ করতে হবে এবং সেই সঞ্চয়স্থান থেকে আবার পড়তে হবে।

— উৎপল কুমার দাস

Answer 3

<div class="button" click="routeWithData()">Pass data and route</div>

ভাল কৌণিক 6 বা অন্যান্য সংস্করণে এটি করার সবচেয়ে সহজ উপায় হ'ল আপনি যে পরিমাণ ডেটা পাস করতে চান তার সাথে আপনার পথটি সংজ্ঞায়িত করা is

{path: 'detailView/:id', component: DetailedViewComponent}

আপনি আমার রুটের সংজ্ঞা থেকে দেখতে পাচ্ছেন, আমি /:idরাউটার নেভিগেশনের মাধ্যমে উপাদানটিতে যেতে চাই এমন ডেটাতে দাঁড়ানোর জন্য আমি যুক্ত করেছি। সুতরাং আপনার কোড মত চেহারা হবে

<a class="btn btn-white-view" [routerLink]="[ '/detailView',list.id]">view</a>

পড়তে হবে idকম্পোনেন্ট উপর, শুধু আমদানি ActivatedRoute মত

import { ActivatedRoute } from '@angular/router'

এবং ngOnInitযেখানে আপনি ডেটা পুনরুদ্ধার করেন

ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        });
        console.log(this.id);
      }

আপনি এই নিবন্ধটি আরও পড়তে পারেন https://www.tektutorialshub.com/angular-passing-paraters-to-route/

Comments

আমি যদি কোনও জটিল বিষয় পাঠাতে চাই তবে কী হবে? আমি

— অনিবার্য

@ সিএমএক্সএল তখন একটি ভাগ করা পরিষেবা ব্যবহার করুন।

— স্ট্যানিস্লাসড্রাগ পুনরায় ইনস্টল করুন মনিকা

ঠিক আমি খুঁজছেন ছিল কি. ধন্যবাদ!

— আখিল

Answer 4

কৌণিক 7.2.0 রাউটেড উপাদানগুলির মধ্যে নেভিগেট করার সময় ডেটা পাস করার নতুন উপায় চালু করেছে:

@Component({
  template: `<a (click)="navigateWithState()">Go</a>`,
})
export class AppComponent  {
  constructor(public router: Router) {}
  navigateWithState() {
    this.router.navigateByUrl('/123', { state: { hello: 'world' } });
  }
}

বা:

@Component({
  selector: 'my-app',
  template: `
  <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>`,
})
export class AppComponent  {}

রাষ্ট্রটি পড়তে, window.history.stateনেভিগেশন শেষ হওয়ার পরে আপনি সম্পত্তি অ্যাক্সেস করতে পারবেন :

export class PageComponent implements OnInit {
  state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }
}

Comments

আমার পক্ষে কাজ করে না, আমি পাস-ইন করা অবজেক্টটি ফিরিয়ে দেওয়ার পরিবর্তে window.history.stateএমন কিছু {navigationId: 2}দেয়।

— লুই

@ লুই আপনি কোন কৌনিক সংস্করণটি ব্যবহার করছেন?

— ওয়াশিংটন ব্রেগা

আমি কৌনিক সংস্করণ 8.1.0 ব্যবহার করছি

— লুই

আমি লুই হিসাবে একই জিনিসটি দেখতে পাচ্ছি, তার চেয়ে কম সংস্করণ সহ তবে এখনও এটির বৈশিষ্ট্যটি বেশি বলে মনে হচ্ছে।

— উইন্ডোজউইনি

প্রত্যাবর্তিত বস্তুর অংশ হিসাবে, navigationIdএকটি মান যুক্ত করা হয়। যদি কোনও ডেটা যুক্ত না করা হয় তবে কেবলমাত্র navigationIdপ্রদর্শিত হবে। পাস করা ডেটা দেখুন, ফিরে যান বা আপনার অ্যাপ্লিকেশনটিকে রিফ্রেশ করুন এবং সেই ক্রিয়াটি পুনরায় ট্রিগার করুন যা ডেটা রুটে ডেটা যুক্ত করে এবং পরবর্তী রুটে নেভিগেট করে (উদাঃ বোতাম ক্লিক)। এরপরে এটি আপনার ডেটাটি অবজেক্টে যুক্ত করবে।

— আলফ মোহ

Answer 5

কিছু সুপার স্মার্ট ব্যক্তি (টিম্বুর্নেল) যা আমার নয় এটি রুটের ডেটা পুনরায় লেখার পরামর্শ দেয়:

let route = this.router.config.find(r => r.path === '/path');
route.data = { entity: 'entity' };
this.router.navigateByUrl('/path');

যেমন মন্তব্য এখানে দেখা ।

আমি আশা করি যে কেউ এই দরকারী পাবেন

Comments

শুধু এই সম্পর্কে পাওয়া গেছে এবং আমার মনে হয় আমি কিছু Stackoverflow পয়েন্টের প্রয়োজন :)

— Tim.Burnell

Answer 6

আমি এই অন্যান্য পদ্ধতির জন্য এই সমস্যা ভাল না। আমার কাছে সবচেয়ে ভাল উপায়টি হল কৌনিক দ্বারা ক্যোরি -প্যারামিটারRouter যা 2 টি উপায় রয়েছে:

সরাসরি জিজ্ঞাসা প্যারামিটার পাস হচ্ছে

এই কোডটি দিয়ে আপনি আপনার এইচটিএমএল কোডের urlমাধ্যমে নেভিগেট করতে পারেন params:

<a [routerLink]="['customer-service']" [queryParams]="{ serviceId: 99 }"></a>

এর মাধ্যমে ক্যোয়ারী প্যারামিটার উত্তীর্ণ হচ্ছে Router

আপনাকে নিজের constructorমতো রাউটারটি ইনজেক্ট করতে হবে :

constructor(private router:Router){

}

এখন এর মতো ব্যবহার করুন:

goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { serviceId: serviceId} });
}

এখন আপনি যদি Routerঅন্যের থেকে পড়তে চান তবে আপনার পছন্দ মতো Componentব্যবহার করতে হবে ActivatedRoute:

constructor(private activateRouter:ActivatedRouter){

}

এবং subscribeযে:

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['serviceId'] || 0;
      });
  }

Comments

this.router.navigate ([['/ product-list']], {কোয়েরিপ্যারামস: {সার্ভিস আইডি: সার্ভিসআইডি}}); this.router.navigate (['/ product-list'], {কোয়েরিপ্যারামস: {serviceId}}) দিয়ে প্রতিস্থাপন করা যেতে পারে;

— রমাকান্ত সিং

Answer 7

এটি 2019 এবং আপনি এখানে যা করতে চান তার উপর নির্ভর করে এখানে অনেক উত্তর কাজ করবে। আপনি যদি এমন কিছু অভ্যন্তরীণ অবস্থানে যেতে চান যা ইউআরএল (প্যারাম, কোয়েরি) তে দৃশ্যমান না হয় আপনি state7.2 সাল থেকে ব্যবহার করতে পারেন (যেমন আমি শিখেছি আজ :))।

ব্লগ থেকে (ক্রেডিটস টমাসজ কুলা) - আপনি রুটে নেভিগেট করুন ...

... টিএস থেকে: this.router.navigateByUrl('/details', { state: { hello: 'world' } });

... এইচটিএমএল টেমপ্লেট থেকে: <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>

এবং এটি লক্ষ্য উপাদানটিতে বাছাই করতে:

constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

দেরীতে, তবে আশা করি এটি সাম্প্রতিক কৌনিকযুক্ত কাউকে সহায়তা করবে।

Answer 8

অ্যাক্টিভরউটের সাথে সমাধান (আপনি যদি পথে পথে অবজেক্ট চান - JSON.stringfy / JSON.parse ব্যবহার করুন):

প্রেরণের আগে অবজেক্ট প্রস্তুত করুন:

export class AdminUserListComponent {

  users : User[];

  constructor( private router : Router) { }

  modifyUser(i) {

    let navigationExtras: NavigationExtras = {
      queryParams: {
          "user": JSON.stringify(this.users[i])
      }
    };

    this.router.navigate(["admin/user/edit"],  navigationExtras);
  }

}

গন্তব্য উপাদান আপনার বস্তু গ্রহণ:

export class AdminUserEditComponent  {

  userWithRole: UserWithRole;      

  constructor( private route: ActivatedRoute) {}

  ngOnInit(): void {
    super.ngOnInit();

      this.route.queryParams.subscribe(params => {
        this.userWithRole.user = JSON.parse(params["user"]);
      });
  }

}

Comments

এটি কাজ করে, তবে আমি যদি ইউআরএল এর সমস্ত ডেটা প্রকাশ করতে চাই না তবে কী হবে?

— এমপিআর

টার্গেট উপাদানটিতে এনক্রিপ্ট হওয়ার পরে আপনি ডেটা এনক্রিপ্ট করতে পারেন para

— বিচ্ছুটি

আমি ডেটা ভাগ করে নেওয়ার জন্য পরিষেবা তৈরি করেছি ।

— এমপ্রো

এটা কি super.ngOnInit();জন্য?

— Andrea Gherardi

Answer 9

তৃতীয় পদ্ধতির উপাদানগুলির মধ্যে ডেটা ভাগ করার সবচেয়ে সাধারণ উপায়। আপনি সম্পর্কিত উপাদানটি ব্যবহার করতে চান যা আপনি আইটেম পরিষেবা ইনজেকশন করতে পারেন।

import { Injectable } from '@angular/core';
import { Predicate } from '../interfaces'

import * as _ from 'lodash';

@Injectable()
export class ItemsService {

    constructor() { }


    removeItemFromArray<T>(array: Array<T>, item: any) {
        _.remove(array, function (current) {
            //console.log(current);
            return JSON.stringify(current) === JSON.stringify(item);
        });
    }

    removeItems<T>(array: Array<T>, predicate: Predicate<T>) {
        _.remove(array, predicate);
    }

    setItem<T>(array: Array<T>, predicate: Predicate<T>, item: T) {
        var _oldItem = _.find(array, predicate);
        if(_oldItem){
            var index = _.indexOf(array, _oldItem);
            array.splice(index, 1, item);
        } else {
            array.push(item);
        }
    }


    addItemToStart<T>(array: Array<T>, item: any) {
        array.splice(0, 0, item);
    }


    getPropertyValues<T, R>(array: Array<T>, property : string) : R
    {
        var result = _.map(array, property);
        return <R><any>result;
    }

    getSerialized<T>(arg: any): T {
        return <T>JSON.parse(JSON.stringify(arg));
    }
}



export interface Predicate<T> {
    (item: T): boolean
}

Comments

রুটগুলি স্যুইচ করার সময় পরিষেবাটি তাত্ক্ষণিকভাবে আসে। সুতরাং আপনি ডেটা আলগা করুন

— জিমি কেন

@ জিম্মিਕੇেন আপনি পৃষ্ঠাটি সতেজ হওয়ার সময় বিশেষভাবে কথা বলছেন তবে যদি তা রিফ্রেশ না হয় তবে স্মৃতিটি এখনও কোনও পরিষেবায় সংরক্ষিত হয়। এটি ডিফল্ট আচরণ হওয়া উচিত কারণ এটি অনেক সময় লোড সঞ্চয় করে save

— অ্যারন রবিনউইজ

ঠিক আছে বিভ্রান্তির জন্য দুঃখিত. এবং ডাউন ভোটের জন্য দুঃখিত। আশা করি আমি এখন এটিকে পূর্বাবস্থায় ফিরিয়ে দিতে পারতাম। অনেক দেরী। কৌণিক 2 এ নতুন ছিল এবং আপনার পদ্ধতির চেষ্টা করার সাথে আমার সমস্যাটি হ'ল আমার কাছে পরিষেবাটি অনেক উপাদানকে সরবরাহ করা হয়েছিল এবং অ্যাপ্লিকেশন মডিউলের মাধ্যমে সরবরাহ করা হয়নি।

— জিমি কেন

Answer 10

JSON ব্যবহার করে পাস করুন

  <a routerLink = "/link"
   [queryParams] = "{parameterName: objectToPass| json }">
         sample Link                   
  </a>

Comments

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

— আলফা ব্রাভো

এর অসুবিধা হ'ল ক্যোরিস্ট্রিংয়ের আকারের সীমাবদ্ধতা রয়েছে এবং কখনও কখনও আপনি অ্যাড্রেস বারে অবজেক্টের বৈশিষ্ট্য দৃশ্যমান হতে চান না।

— সিএম

Answer 11

একটি কাস্টম সূচক সহ ডেটা সঞ্চয় করতে একটি ভাগ করা পরিষেবা ব্যবহার করুন। তারপরে ক্যোয়ারীপ্যারামের সাহায্যে সেই কাস্টম সূচকটি প্রেরণ করুন। এই পদ্ধতির আরও নমনীয় ।

// component-a : typeScript :
constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.DataCollector['someDataIndex'] = data;
}

// component-a : html :
<a routerLink="/target-page" 
   [queryParams]="{index: 'someDataIndex'}"></a>

।

// component-b : typeScript :
public data;

constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.route.queryParams.subscribe(
        (queryParams: Params) => {
            this.data = this.DataCollector[queryParams['index']];
        }
    );
}

Answer 12

বলো তোমার আছে

1. component1.ts
2. component1.html

এবং আপনি উপাদান 2.ts ডেটা পাস করতে চান ।

• উপাদান 1.ts মধ্যে ডেটা বলে একটি পরিবর্তনশীল

    //component1.ts
    item={name:"Nelson", bankAccount:"1 million dollars"}
  
    //component1.html
     //the line routerLink="/meter-readings/{{item.meterReadingId}}" has nothing to 
    //do with this , replace that with the url you are navigating to
    <a
      mat-button
      [queryParams]="{ params: item | json}"
      routerLink="/meter-readings/{{item.meterReadingId}}"
      routerLinkActive="router-link-active">
      View
    </a>
  
    //component2.ts
    import { ActivatedRoute} from "@angular/router";
    import 'rxjs/add/operator/filter';
  
    /*class name etc and class boiler plate */
    data:any //will hold our final object that we passed 
    constructor(
    private route: ActivatedRoute,
    ) {}
  
   ngOnInit() {
  
   this.route.queryParams
    .filter(params => params.reading)
    .subscribe(params => {
    console.log(params); // DATA WILL BE A JSON STRING- WE PARSE TO GET BACK OUR 
                         //OBJECT
  
    this.data = JSON.parse(params.item) ;
  
    console.log(this.data,'PASSED DATA'); //Gives {name:"Nelson", bankAccount:"1 
                                          //million dollars"}
     });
    }

Answer 13

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

সেবায়।

@Injectable({
  providedIn: 'root'
})
export class CustomerReportService extends BaseService {
  reportFilter = new BehaviorSubject<ReportFilterVM>(null);
  constructor(private httpClient: HttpClient) { super(); }

  getCustomerBalanceDetails(reportFilter: ReportFilterVM): Observable<Array<CustomerBalanceDetailVM>> {
    return this.httpClient.post<Array<CustomerBalanceDetailVM>>(this.apiBaseURL + 'CustomerReport/CustomerBalanceDetail', reportFilter);
  }
}

উপাদানটিতে আপনি এই আচরণবিধিতে সাবস্ক্রাইব করতে পারেন।

this.reportService.reportFilter.subscribe(f => {
      if (f) {
        this.reportFilter = f;
      }
    });

দ্রষ্টব্য: সাবজেক্ট এখানে কাজ করবে না, শুধুমাত্র আচরণের সাবজেক্ট ব্যবহার করা দরকার।