title: ActivatedRoute subscribe to first child parameters observer
body: <p>I'm  not sure if this is the best way to implement this. If you have other opinions please share.</p>
  
  <p>I have to implement a multi inbox system where the user can have multiple emails grouped by different inboxes.</p>
  
  <p>For example: <code>http://localhost/inbox/personal/</code> will show a list of emails in <code>personal</code> inbox, <code>http://localhost/inbox/business/3</code> will show a list of emails in <code>business</code> inbox and will highlight email with id: <code>3</code></p>
  
  <p>Routes look like this:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      pathMatch: 'full',
      redirectTo: 'personal' // redirect to personal inbox
    },
    {
      path: ':inbox',
      component: InboxContentComponent, // list of emails in :inbox
      children: [
        {
          path: '',
          component: InboxNoSelectedEmailComponent, // no email selected
        },
        {
          path: ':id',
          component: InboxSelectedEmailComponent, // show selected email content
        }
      ]
    }
  ];
  </code></pre>
  
  <p>My problem is with <code>InboxContentComponent</code> . I need to detect when inbox changes and if an email is selected or not</p>
  
  <pre><code>  constructor(private route: ActivatedRoute) {
    }
    ngOnInit() {
      this.route.paramMap.subscribe(inbox =&gt; {
        console.log('inbox', inbox);
      });
    }
  </code></pre>
  
  <p>Events are emitted only when inbox changes and not when email changes. 
  Is there a way to detect when child route parameters changes?</p>
  
  <p>Doing this <code>this.route.firstChild.paramMap.subscribe();</code> only works if on component initialization the route has a first child. if the route is like this <code>http://localhost/inbox/business/</code> then <code>this.route.firstChild</code> is <code>null</code></p>
  
  <p>On solution I could think is to define routes like this</p>
  
  <pre><code>{
      path: ':inbox/:id',
      component: InboxContentComponent
  }
  </code></pre>
  
  <p>and then check in <code>InboxContentComponent</code> if <code>:id</code> is set or not</p>
  
  <p>Any ideas?</p>