0

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);
Mohamed Ali RACHID
  • 3,245
  • 11
  • 22

3 Answers3

1

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:''});
federico scamuzzi
  • 3,708
  • 1
  • 17
  • 24
  • in the third step i think u mean `this._sharedService.emitChangeActivity({name:'',descr:''});` , i changed it and i tested , i get this error cannot get 'outlet' of null – Mohamed Ali RACHID Jun 09 '17 at 12:01
  • i think that there no relation between the two component to emit the event.. can u please explain to me what you do exactly in ur code ? – Mohamed Ali RACHID Jun 09 '17 at 12:04
  • it was my fault , i fixed the outlet error.. , but when i subscribe in changeActivityEmitted$ there is no result, i think because we use the service in different components the source is empty when i inject it.. – Mohamed Ali RACHID Jun 09 '17 at 12:13
  • no it is made to share stuff in different component it's like Angularjs $broadcast() and $on() – federico scamuzzi Jun 09 '17 at 12:34
1

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; 
}
DeborahK
  • 57,520
  • 12
  • 104
  • 129
0

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

Gautam
  • 1,046
  • 5
  • 20