javascriptangularjsangularcomponentsngroute

angular2 - Pass value from parent route to child route


I have a route called home and it has three child routes, documents, mail and trash. In the home route component it has a variable called 'user'. I know there are a few ways of passing info between parent and child components highlighted here, but how am I suppose to pass info between parent/child routes.

{ path: 'home',  component: HomeComponent, children: [
        { path: 'documents',  component: DocumentsComponent },
        { path: 'mail',  component: MailComponent },
        { path: 'trash',  component: TrashComponent },
    ]
},

Service

import { Injectable } from '@angular/core';
@Injectable()
export class HomeService {
  // Mock user, for testing  
  myUser = {name:"John", loggedIn:true};
  // Is Super Admin
  isLogged():boolean {
    if(this.myUser.role == true){
      return true ; 
    }
    return false ; 
  }
}

Component

  constructor(public router: Router, public http: Http, private homeService: HomeService) {

  }

  isLogged(){
    return this.homeService.isLogged(); 
  }

Template

<div class="side-nav fixed" >
    <li style="list-style: none">
        <img alt="avatar" class="circle valign profile-image" height="64" src=
        "../images/avatar.jpg" width="64">
        <div class="right profile-name">
            <!-- Value not changing even with service --> 
            {{myUser.role}} 
        </div>
    </li>


Solution

  • You may use a common service to pass data like explained in the Angular Documentation

    Basically you may create a Service which will have a user object, which can be updated once your parent route gets loaded or with some action on parent component.

    UserService

       import { Injectable } from '@angular/core';
       import { Subject }    from 'rxjs/Subject';
    
       @Injectable()
       export class UserService {
         // Observable user 
         user = new Subject<string>();
       }
    

    And then when the child route component gets loaded you may retrieve the value from the Service.

    HomeComponent

     @Component({
       ... 
     })
     export class HomeComponent{
       ... 
       constructor(private userService:UserService ){}
       someMethod = () =>{
          this.userService.user.next(<pass user object>);
       }
     }
    

    MailComponent

     @Component({
       ... 
     })
     export class HomeComponent{
       ... 
       constructor(private userService:UserService ){
         this.userService.user.subscribe(userChanged);  
       }
    
       userChanged = (user) => {
         // Do stuff with user
       }
     }
    

    Service object will be same instance in child if you add the provider in the parent.