title: Targeting parent's router-outlet from child component in Angular 2?
body: <p>Since Angular 2 Router was frequently updated, the old questions for this topic are no longer valid. I have been searching for a solution to this problem and I have yet to find one... </p>
  
  <p>So, my problem is targeting parent's component router-outlet from a child component.</p>
  
  <p>For example, we have an AppComponent like this one (root of our app) : </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  import {HeaderComponent}  from './header.component';
  import {LibraryComponent}  from './library.component';
  
  @Component({
    selector: 'my-app',
    template: `
    &lt;header&gt;&lt;/header&gt;
    &lt;library&gt;&lt;/library&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    directives: [ROUTER_DIRECTIVES,HeaderComponent,LibraryComponent],
    providers: []
   })
  export class AppComponent {
  
  }
  </code></pre>
  
  <p>And HeaderComponent looks like this : </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
  selector:'header',
  template:'&lt;a routerLink="test" routerLinkActive="active"&gt;go to TEST&lt;/a&gt;',
     directives:[ROUTER_DIRECTIVES]
  })
  export class HeaderComponent{}
  </code></pre>
  
  <p>The main part in my app.routes looks like this: </p>
  
  <pre><code>const routes: RouterConfig = [
   {
    path: 'test',
    component: TestComponent
   }
  ];
  </code></pre>
  
  <p>What exactly am I doing wrong here? 
  When I click the link to "test", a new "test" div is created (I assume this is because of the selector in TestComponent) while the router-outlet remains empty.</p>
  
  <p>Another question I also have is, why do I have to import the ROUTER_DIRECTIVES and also supply it to the directives in the child component HeaderComponent, if I have already done so in the parent component?</p>