Comment le changement de variable parent d'enfants composant?

Cette question est assez simple mais je n'arrive pas à se débarrasser de lui.

J'ai un <header> dans le template parent et j'ai besoin de disparaître lors de l'affichage d'enfants template par module de routage. Ce que j'attends est l'ajout d'une classe à la balise d'en-tête afin que je puisse le cacher via CSS. C'est ce que j'ai:

app.composante.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app',
  template: `
    <header [class.hidden]="hide">
      <h1>My App</h1>
      <ul>
            <li><a href="/home"></a></li>
            <li><a href="/showoff"></a></li>
      </ul>
    </header>
    <router-outlet></router-outlet>
  `
})

export class AppComponent {
  hide = false; //<-- This is what I need to change in child component
}

application de routage.le module.ts

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './welcome.component';
import { ShowOffComponent } from './show.off.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'showoff', component: ShowOffComponent },
];

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: true
});

spectacle.offf.composante.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-showoff',
   template: `
       <h2>Show Off</h2>
       <div>Some contents...</div>
   `
})

export class ShowOffComponent {
   hide = true; //<-- Here is the problem.
                //I don't have any idea how to reach parent variables.
}

OriginalL'auteur Mdkusuma | 2017-01-16