У меня есть компонент боковой навигации, который будет использоваться на многих страницах. Это не одностраничное веб-приложение. Он динамически загружается в родительский компонент, который переключает меню. ContentChild используется для получения дескриптора дочернего компонента, чтобы его можно было переключать, устанавливая @input overlayHidden. Проблема в том, что ContentChild имеет значение null.

Запустить этоplunker с открытой консолью отладки. Нажмите «Панель инструментов» на первой странице, а затем «Переключить меню» со второй страницы, чтобы увидеть нулевой указатель.

Что я делаю неправильно?

Вот код

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;
    }
}

Я создал решение публикации / подписки, которое работает (за исключением проблемы с атрибутом «скрытый» в оверлейном элементе div), но я подумал, что это будет более простым решением, если я смогу заставить его работать.