title: Pass input to Angular components via router
body: <p>In Angular 2, I have my routes defined in <code>app.module.ts</code>:</p>
  
  <pre><code>const appRoutes: Routes = [
    { 
      path: '',
      component: HomeComponent,
    },
    {
      path: 'admin',
      component: AdminComponent,
    }
  ];
  </code></pre>
  
  <p>I also have an <code>app.component</code> which displays the menu and a search form. This <code>app.component</code> is connected to a service (<code>events.service.ts</code>) which returns an array of <code>events</code>. When the search form is submitted, <code>app.component</code> calls the service to filter the events and then grabs them:</p>
  
  <pre><code>getEvents(): void {
      this.eventsService.getEvents().then(events =&gt; {this.events = events});
  }
  
  onSubmit() {
      this.searchTerm = this.model.searchTerm;
      this.eventsService.search(this.searchTerm).then(res =&gt; this.getEvents());
  }
  </code></pre>
  
  <p>I would like to be able to pass <code>this.events</code> from the <code>app.component</code> down to the two routes specified in <code>app.module</code> (<code>home</code> and <code>admin</code>). </p>
  
  <p>My <code>home.component.ts</code> requires the same <code>events.service.ts</code>, and grabs events from it in an <code>onNgInit</code> function, but when the events in the service have been updated via the search in <code>app.component.ts</code>, the events grabbed in the initialisation of <code>home.component.ts</code> are out of date. I would like them to be synchronised.</p>