title: angular2 - Pass value from parent route to child route
body: <p>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 <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html" rel="noreferrer">here</a>, but how am I suppose to pass info between parent/child routes. </p>
  
  <pre><code>{ path: 'home',  component: HomeComponent, children: [
          { path: 'documents',  component: DocumentsComponent },
          { path: 'mail',  component: MailComponent },
          { path: 'trash',  component: TrashComponent },
      ]
  },
  </code></pre>
  
  <p>Service</p>
  
  <pre><code>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 ; 
    }
  }
  </code></pre>
  
  <p>Component </p>
  
  <pre><code>  constructor(public router: Router, public http: Http, private homeService: HomeService) {
  
    }
  
    isLogged(){
      return this.homeService.isLogged(); 
    }
  </code></pre>
  
  <p>Template</p>
  
  <pre><code>&lt;div class="side-nav fixed" &gt;
      &lt;li style="list-style: none"&gt;
          &lt;img alt="avatar" class="circle valign profile-image" height="64" src=
          "../images/avatar.jpg" width="64"&gt;
          &lt;div class="right profile-name"&gt;
              &lt;!-- Value not changing even with service --&gt; 
              {{myUser.role}} 
          &lt;/div&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p></p>