title: Angular2 component communication with router-outlet
body: <p>Either I'm not getting the pattern or my design is wrong.</p>
  
  <p>Using angular2-beta0, typescript</p>
  
  <p>Basically I have set up a very basic application with a root component a router that controls main views and then on some pages I have a sub router to control the subviews on that component.</p>
  
  <p>What I seem to be struggling with is how to structure things with communication between components. With the application as it is at the moment it's arranged in a way that makes logical sense to me, the main route's views have nothing in common and in the sub route views they all share the same side navigation and headers. The problem I have seems to be communicating back to the parent view of a sub-view. It seems to be that is a child is in a router-outlet it can't get the dependency of the parent component. I have looked at custom events but these only seem to work if bound to a template. The only other option seems to be a service but that seems broken to me as Ideally I want the parent component to be in control of the state of the sub components.</p>
  
  <p>Any how some example code...</p>
  
  <pre><code>@Component({
      selector: 'app'
  })
  
  @View({
      template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
      directives: [ROUTER_DIRECTIVES]
  })
  
  @RouteConfig([
      { path: '/', as: 'Login', component: LoginForm },
      { path: '/main/...', as: 'Main', component: Main}
  ])
  
  class App {
  
      constructor(private _router: Router) {
      }
  
  }
  
  bootstrap(App, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]);
  
  
  @Component({
      selector: 'main'
  })
  
  @View({
      templateUrl: '/client/main/main.html',
      directives: [ROUTER_DIRECTIVES, NgClass, Menu, Main]
  })
  
  @RouteConfig([
      { path: '/', as: 'Clear', component: StateClear },
      { path: '/offer', as: 'Offer', component: StateOffer }
  ])
  
  export class Main {
  
      constructor(private _router: Router) {
  
      }
  
  }
  
  @Component({
      selector: 'state-clear'
  })
  
  @View({
      templateUrl: '/client/bookings/state-clear.html'
  })
  
  export class StateClear {
  
      constructor(main: Main) {
  
      }
  }
  </code></pre>
  
  <p>The error I'm getting with DI is this...</p>
  
  <p>EXCEPTION: Cannot resolve all parameters for StateClear(undefined). Make sure they all have valid type or annotations.</p>
  
  <p>No error with the event as I don't see how to listen outside of the template.</p>