Passing data to Router Angular 2 [duplicate]

Answer 1

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

Answer 2

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; 
}

Answer 3

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:''});