title: Can't pass data between component using RxJS Subject/Shared Service
body: <p>I'm trying to use Subject and a shared service to transfer data from one component to another. But it isn't working. </p>
  
  <p>Please note that I listed the service in the module level instead of the component decorator. Also perhaps worth noting is that these two components do not share a parent-child relationship.</p>
  
  <p>My service (SearchService):</p>
  
  <pre><code>import { Subject } from 'rxjs/Subject';
  
  @Injectable()
  export class SearchService {
    public messageSource = new Subject&lt;any&gt;();
  
    constructor() { }
  
    topAlbums(album){
      this.messageSource.next(album);
    }
  
  }
  </code></pre>
  
  <p>Component 1 (That is sending the data). When createList() is triggered, it navigates to the new route perfectly but the message that I'm subscribing to below (in Component 2) does not show.</p>
  
  <pre><code>    import { SearchService } from '../../services/search.service';
  
      export class AlbumComponent implements OnInit {
      private UNIQUE_ID: string;
      constructor(private _service: SearchService, private _http: Http, private router: Router) { }
  
      //Linked to a click event handler
      createList(){
          //API Call to retrieve an ID
          this._http.post('https://api.url', data)
              .map(res =&gt; res.json())
              .subscribe(item =&gt; {
                this.ID = item.id;
                let parsed_JSON = JSON.parse(item.files.myAlbums.content);
                this.router.navigate(['/list', this.UNIQUE_ID]);
              })
         this._service.topAlbums("Testing out by sending a dummy message");
  
   }
  </code></pre>
  
  <p>Component 2 (Receiving the data):</p>
  
  <pre><code>import { SearchService } from '../../services/search.service';
  
      export class ListComponent implements OnInit {
      constructor(private _service: SearchService) { }
      ngOnInit(){
        this._service.messageSource.subscribe(data =&gt; console.log(data));
      }          
   }
  </code></pre>