How to send array in router navigate?

Question

Searched for a solution in other questions but nothing helped me..

I wish to redirect to url like,

this.router.navigateByUrl('/products');

In which i need to pass the array and need to get it it in the component which has the active link products using skip location change without showing anything in url.

Array will be like,

products = [{"id":1,"name":"Product One","id":2,"name":"Product Three","id":3,"name":"Product Six"}]

I need to pass this entire array in router link and need to retrieve it in another component (products) active link using skipLocation Change true..

Tried with sharedService but i am getting issue of data loading at right point of time and hence i decided to use via router link..

If this is not a good approach, kindly suggest other alternative without using sharedservice..

Either you can use the Query string or Session Storage to implement this functionality. — Raja Rama Mohan Thavalam, Nov 27 '18 at 07:39
also could create a service to do the same : https://angular.io/guide/component-interaction#!#bidirectional-service — Joel Joseph, Nov 27 '18 at 07:41
Possible duplicate of https://stackoverflow.com/questions/42412110/angular-2-how-to-pass-an-array-to-the-router-using-queryparams/42505212#42505212 — localroot, Nov 27 '18 at 07:41
@PardeepJain, Using shared service i am facing problem of latency and so i wish to make this approach.. — Maniraj Murugan, Nov 27 '18 at 07:41
@undefined but this is not ever recommended approach you. Using service code could be cleaner and simpler — Pardeep Jain, Nov 27 '18 at 07:42
Without shared service is there any approach?? Because i am facing problems of fetching data using shared service at right time.. — Maniraj Murugan, Nov 27 '18 at 07:43

score 1 · Answer 1 · answered Nov 27 '18 at 07:53

You can use Angular Services for a large data.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ExampleService {

private subject = new Subject<any>();  

updateRouteData(data) {
    this.subject.next(data);
}

routeData(): Observable<any> {
    return this.subject.asObservable();
}
}

In your components;

For set route data;

import { ExampleService } from '/example.service'

export class ComponentOne{

constructor(private exampleService:ExampleService){
   this.exampleService.updateRouteData(data)
}

You can pass data like;

import { ExampleService } from '/example.service'

export class ComponentTwo{

constructor(private exampleService:ExampleService){
   this.exampleService.routeData().subscribe(data => {
       console.log(data)
   })
}

How to send array in router navigate?

1 Answers1