Passing data to Router Angular 2 [duplicate]

0
votes

I need to pass data to my Router to use it in the destination component , i used NavigationExtras 's QueryParam but it shows parameters in the URL , is there an other way to pass data ? 

let navigationExtras: NavigationExtras = {
            queryParams: {
                "param1": true,
            }
        };
        this.router.navigate(['/page1/view'],navigationExtras);
3
angular
do you want querystring like ?param=true or as / - federico scamuzzi
neither, i need to pass data without showing it in the URL - Mohamed Ali RACHID
can you pass it as @input? .. is it a compononet child? - federico scamuzzi
nope that's the problem , it's another component i need something similar to : ` { path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } }` - Mohamed Ali RACHID
so try to use a broadcasting maybe - federico scamuzzi

3 Answers

1
votes

As others have said, use a service.

I have a simple example here:

https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

import { Injectable } from ‘@angular/core’;
@Injectable() 
export class DataService { 
  serviceData: string; 
}

Or now in Angular v6 and higher:

import { Injectable } from ‘@angular/core’;
@Injectable({
   providedIn: 'root'
}) 
export class DataService { 
  serviceData: string; 
}
1
votes

Hi Try with something like this:

1 - Declare a Service like:

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


@Injectable()
export class SharedService {

  // Observable sources (change activity)
    private emitChangeActivitySource = new Subject<any>();
    // Observable streams (change activity)
    changeActivityEmitted$ = this.emitChangeActivitySource.asObservable();
    // Service (change activity)
    emitChangeActivity(change: any) {
        this.emitChangeActivitySource.next(change);
    }

}

2- then when you want to get (subscribe ) for it:

import {  SharedService } from '../shared/services/index';

@Component({
    selector: 'app-dashboard',
    templateUrl: './full-layout.component.html',
    styleUrls: ['./full-layout.component.scss']
})
export class FullLayoutComponent {


    constructor(private toasterService: ToasterService,
        private currentUserService: CurrentUserService,
        private menuService: MenuService,
        private router: Router,
        private auth: AuthService,
        private _sharedService: SharedService,
        private _activitiesService: ActivitiesService,
        private _router: Router) {


   _sharedService.changeActivityEmitted$.subscribe(
            activity => {
                this.data = activity;

                }
            });

            }

            }

3- where you want to trigger it:

this._sharedService.emitChangeActivitySource({name:'',descr:''});
0
votes

Before you navigate to your next page set the parameter using set method. then navigate to your next page

myFunction1(){
    this.uploadData = param;
    this.router.navigate(['/page1/view'])
}

set uploadData (param) {
        this._param = param;
}

once you are on the next page, retrieve the parameter using get method

myFunction2(){
        parameter = this.uploadData;
}   

get uploadData () {
            return this._param;
}

please note. this is just a sudo code. you will need to implement it as per your requirement.

you can more info about getters and setters from following links

set method

get method