Eu tenho um componente de navegação lateral para ser usado em muitas páginas. Este não é um aplicativo da web de página única. Ele é carregado dinamicamente em um componente pai que alterna o menu. O ContentChild é usado para obter um identificador no componente filho, para que ele possa ser alternado, definindo @input overlayHidden. O problema é que o ContentChild é nulo.

Rode istoplunker com o console de depuração aberto. Clique em "Painel" na primeira página e depois em "Alternar menu" na segunda página para ver o ponteiro nulo.

O que estou fazendo errado?

Aqui está o código.

import { Component, Input} from 'angular2/core';
import { Router } from 'angular2/router';

@Component({
    selector: 'side-navigation',
    template: `
    <div id="overlay" [hidden]="overlayHidden">
    <div id="wrapper">
        <nav id="menu" class="white-bg active" role="navigation">
            <ul>
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Help & FAQs</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Log Out</a></li>
            </ul>
        </nav>
    </div>
</div>
`
})
export class SideNavigationComponent {
    @Input() overlayHidden: boolean;
}

import { Component, 
    DynamicComponentLoader, 
    Injector, 
    ContentChild,   AfterContentInit 
} from 'angular2/core';

import { Router, RouterLink } from 'angular2/router';
import { SideNavigationComponent } from './side-navigation';

@Component({
    selector: 'dashboard',
    template: `
    <side-navigation id="side-navigation"></side-navigation>...
`,
directives: [ 
    RouterLink, 
    SideNavigationComponent ]
})
export class DashboardComponent {
    title = 'Dashboard';
    @ContentChild(SideNavigationComponent)
        sideNavigationComponent: SideNavigationComponent;

    constructor(private _router: Router, 
        private _dcl: DynamicComponentLoader, 
        private _injector: Injector) {
        this._router = _router;
        this._dcl = _dcl;
        this._injector = _injector;
        this._dcl.loadAsRoot(
      ,      SideNavigationComponent, 
            '#side-navigation', this._injector);
    }

    toggleOverlay() {
        this.overlayHidden = !this.overlayHidden;
        this.sideNavigationComponent.overlayHidden = this.overlayHidden;
    }
}

Criei uma solução de publicação / assinatura que funciona (exceto por um problema com o atributo 'oculto' da divisão de sobreposição), mas achei que seria uma solução mais simples se eu conseguisse fazê-la funcionar.