title: Subject is not working when route navigating from one component to another component in Angular 6
body: <p>I have Component A, Component B, and a service. I declared Subject in the service and subscribed the Subject in component B., And I'm sending some data from Component A to the Subject before navigating to component B.  It is navigating to component B, but the Subscribe method is not triggering.</p>
  
  <p><b> Service: </b> </p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class ServiceTestService {
  storage: Recipe;
  recipeSelected = new Subject&lt;any&gt;();
  constructor() { }
  
  }
  </code></pre>
  
  <p><b> Component A </b> Sending the message to observable</p>
  
  <pre><code>@Component({
    selector: 'app-recipe-item',
    templateUrl: './recipe-item.component.html'
   })
  
  export class RecipeItemComponent implements OnInit {
  
  @Input() recipe: Recipe;
  
    constructor(
       private recipeService: ServiceTestService,
       private rt: Router) { }
  
    ngOnInit() {
    }
  
    onRecipeSelected(name: number) {
  
  this.recipeService.recipeSelected.next(this.recipe);
  this.rt.navigate(['/recipe', this.ind]);
  
    }
  }
  </code></pre>
  
  <p><b> Component B:  </b> Here I subscribed the Observable.</p>
  
  <pre><code>@Component({
    selector: 'app-recipe-detail',
    templateUrl: './recipe-detail.component.html',
    styleUrls: ['./recipe-detail.component.css']
    })
  
  export class RecipeDetailComponent implements OnInit, OnDestroy {
    recipe: Recipe;
  
    constructor(private recipeService: ServiceTestService) { }
  
  ngOnInit() {
  
  this.recipeService.recipeSelected.subscribe(
  
    (res: any) =&gt; {
      console.log(`Recipe Component ${res}`); }
  );
  
  }
  
  }
  </code></pre>
  
  <p>It's navigating from Component A to Component B but the subscribe method is not triggering in Component B. Please suggest. </p>