title: Angular 2 Access input value of a different routed component via ngOnInit?
body: <ol>
  <li><p>I have a search bar in <code>app.component.ts</code> that has an input value.</p></li>
  <li><p><code>results.component.ts</code> is embedded with a router-outlet in <code>app.component.html</code></p></li>
  <li><p>When <code>results.component.ts</code> is the current activated route, the search works fine and so do the results.</p></li>
  <li><p>However, if someone clicks on a result, <code>results.component.ts</code> is replaced with a different component view <code>detail.component.ts</code> (it provides them with more information about the result.)</p></li>
  <li><p>On <code>detail.component.ts</code> I have a "back to results" link setup with a <code>routerLink='/'</code>. And mind you, the search query is still present in the search bar because that view never gets replaced.</p></li>
  <li><p>When this back button is clicked, <code>results.component.ts</code> reloads and fires <code>ngOnInit</code>.</p></li>
  </ol>
  
  <p><strong>The problem</strong>: I can't access the value of the search string in <code>app.component.ts</code> <strong>from</strong> <code>results.component.ts</code> ngOnInit to repopulate the results.  I've tried almost everything I can think of.</p>
  
  <p>I already have a service built, but I don't know how to set it up to communicate that value, if that is the solution.  </p>
  
  <p><strong>Updated with code</strong></p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>//other html
  &lt;input placeholder="What do you want to learn?" name="searchStr" [(ngModel)]="searchStr" (keyup.enter)="searchCourse($event)"&gt;
  </code></pre>
  
  <p><strong>interaction-service.service.ts</strong>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject }    from 'rxjs/Subject';
  
  
  @Injectable()
  export class InteractionService {
  
     // Observable string sources
    private searchStr = new Subject&lt;string&gt;();
  
    // Observable string streams
    searchStr$ = this.searchStr.asObservable();
  
    sendString(searchString: string) {
      this.searchStr.next(searchString);
    }
  
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong>:</p>
  
  <pre><code>//other imports
  import {InteractionService} from './interaction-service.service';
  
  @Component({ 
    selector: 'my-app',
    templateUrl: 'app.component.html',
    providers: [CourseService, InteractionService]
  })
  
  export class AppComponent implements OnInit { 
  
      searchStr: string;
  
      constructor(private _courseService: CourseService, private _interactionService: InteractionService, private router: Router) {
  
      }
  
      ngOnInit() {
  
      }
  
      searchCourse(event) {
          this._interactionService.sendString(event.target.value);
          this.router.navigateByUrl('/');
      }
  
  }
  </code></pre>
  
  <p><strong>course-listings.component.ts</strong> (I referred to this as results above)</p>
  
  <pre><code>// other imports
  import {Subscription} from 'rxjs';
  import {InteractionService} from '../interaction-service.service';
  
  @Component({
    selector: 'app-course-listings',
    templateUrl: './course-listings.component.html',
    providers: [CourseService],
  })
  
  export class CourseListingsComponent implements OnInit {
  
      //some other properties defined
      @Input() searchStr: string;
      subscription: Subscription;
  
      constructor(private _courseService: CourseService, private _interactionService: InteractionService) {
  
           this.subscription = this._interactionService.searchStr$.subscribe(
      courses =&gt; {
               this.searchStr = courses;
  
               // code for returning results here..
  
           }
    );
  
      }
  
      ngOnInit() {
  
      }
  
  
  }
  </code></pre>