title: Emit events between nested components grandchild to root component
body: <p>I have <code>wheels.component</code> nested to <code>car.component</code>.</p>
  
  <p><strong>wheels.component:</strong></p>
  
  <pre><code>export class WheelsComponent {    
      @Output() onLoaded : EventEmitter&lt;string&gt;() = new EventEmitter&lt;string&gt;();
  
      private downloadAllFiles(url: string) {
          this.onLoaded.emit('Hello, World 1!');
          //some operations to wait
          this.onLoaded.emit('Hello, World 2!');
  
      };
  }
  </code></pre>
  
  <p>Component <code>car.component</code> is not written at html page, but called through routing at <strong>car-routing.module.ts:</strong></p>
  
  <pre><code>@NgModule({
      imports: [
          RouterModule.forChild([
              {
                  path: 'sfactmessage/:id',
                  component: CarComponent,
                  resolve: {
                      card: cardResolver
                  }
              }
          ])
      ],
      exports: [RouterModule]
  })
  export class CarRoutingModule {}
  </code></pre>
  
  <p>What I want is to handle event emitted from <code>wheels.component</code>, not at <code>car.component</code>, <strong>but at app.component</strong>.</p>
  
  <p>Is it possible to handle event at <code>app.component</code>?</p>
  
  <p><a href="http://plnkr.co/edit/EsEJw7jbkRw4aNJ9iJR0?p=preview&amp;open=app%2Fapp.component.ts" rel="nofollow noreferrer">The plunker sample is not working</a> (sorry, this is my first plunkr example), but gives a view how my app is arranged.</p>