how can i get variable from parent Component in the child component in angular 2?

Question

this is Routing.ts

{
 path: 'adminHome',
 component: adminHomeComponent,
 children: [
    {
     path: 'users',
     component: UserListComponent,
     children: [
       {
         path: ':id',
         component: EntrepriseListComponent,
         children: [
           {
              path: ':id2',
              component: ListLaucauxComponent,
              children:[
                 {
                  path:':id3',
                  component:DeviceListComponent }
                        ].......

and this is UserListComponent which contains the list of the user and router-outlet to display the EntrepriseListComponent

@Component({
template :`
<h2> List of users</h2>
        <ul *ngFor="  let user of users >
            <li>{{user.firstName}}</li>
            <li>{{user}}</li>
            <li><a [routerLink]="['/adminHome/users',user.id]">L.E</a></li>
        </ul>
                <router-outlet></router-outlet> `
})
export class UserListComponent implements OnInit {
private users: User[];

constructor(private userService: UserService ) { }

ngOnInit() 
{
  this.userService.getAllUsers().subscribe(data => {this.users = data} )
 }

and this is EntrepriseListComponent which contains the list of the Entreprise and router-outlet to display the LocalListComponent

@Component({
template:`
<h2>List of entreprise </h2> 
  <ul *ngFor="let entreprise of entreprises">
      <li>{{entreprise .id}}</li>
      <li>{{entreprise .name}}</li>
      <li><a [routerLink]="
['/adminHome/users/',idUser,entreprise.id]">L.L</a></li>
    </ul>
              <router-outlet></router-outlet> `
 })
export class EntrepriseListComponent implements OnInit {

constructor(private Service:EntrepriseService ,private 
route:ActivatedRoute) { }

entreprises : Entreprise[];
idUser :string ; // this what i want to get from parent

ngOnInit() { 
this.route.params.forEach(params=>{
   this.route.params.forEach(params => {
        let id = params['id'];

        this.entrepriseService.getEntrepriseByIdUser(id)
            .subscribe(data => {
                console.log(data)
                this.entreprises = data;
            })
        this.sharedService.userId$.subscribe(data => this.userId = data);
        this.sharedService.updateUserId(id);


 })    
}

and this is LaucauxListComponent which contains the list of the laucaux and router-outlet to display the DeviceListComponent

@Component({
template: `
<h2>List des Locaux </h2> 
<ul *ngFor="let x of laucaux">
<li>{{x.name}}</li>
<li><a [routerLink]="['/adminHome/users/',idUSer,idEntreprise,x.id]">Liste 
 Devices</a></li>
 </ul>
    <router-outlet></router-outlet>`
 })
export class ListLaucauxComponent implements OnInit {
laucaux: Laucaux[]

constructor(private ls: LoacauxService, private route:ActivatedRoute) { }
idUSer :string ;// this what i want to get from parent
idEntreprise : string ;// this what i want to get from parent

ngOnInit() {
 let id = params['id2'];

        this.loacauxService.getLaucauxByEntreprise(id)
            .subscribe(data => {
                console.log(data)
                this.laucaux = data;
            })

        //retrieve values
        this.sharedService.userId$.subscribe(data => this.iduser = data);
        this.sharedService.enterpriseId$.subscribe(data => this.identreprise 
  = data);


        //update values
        this.sharedService.updateUserId(this.iduser);
        this.sharedService.updateUserId(this.identreprise);

}

so how can i get idUSer in EntrepriseListComponent and idUSer&idEntreprise in ListLaucauxComponent

Answer 1

When sharing data across routes likes this it is best to create a shared service for them to use. Each component can update any relevant data in the shared service and you can use Observables that each component can subscribe to to receive updates on the shared data. It would look something like this:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class SharedService {
  // Observable string sources
  private userIdSource = new Subject<string>();
  private enterpriseIdSource = new Subject<string>();

  // Observable string streams
  userId$ = this.userIdSource.asObservable();
  enterpriseId$ = this.enterpriseIdSource.asObservable();

  // Service message commands
  updateUserId(id: string) {
    this.userIdSource.next(id);
  }
  updateEnterpriseId(id: string) {
    this.enterpriseIdSource.next(id);
  }
}

By using Subject, components will only receive values that are updated after a component subscribes. IE: SharedService sends out a new userId THEN ComponentA subscribes to the userId$ observable. ComponentA would NOT get the previously updated value. If you need any previous value to be sent to a component regardless of when they subscribe, then use BehaviorSubject instead of Subject.

Components would subscribe to the values and update values like this:

export class ComponentA {

    userId:string;

    constructor(private sharedService: SharedService){}


    ngOnInit(){
        //retrieve values
        this.sharedService.userId$.subscribe(data => this.userId = data);

        //update values
        this.sharedService.updateUserId('newValue');
    }
}

Hope this helps.