@ContentChild是空的DynamicComponentLoader [英] @ContentChild is null for DynamicComponentLoader

问题描述

我有一个侧面的导航组件要在多个页面中。这不是一个单页的Web应用程序。它是动态加载的切换菜单中的父组件。 ContentChild用于获取一个手柄在子组件上，以便它可以通过设置@input overlayHidden进行切换。问题在于ContentChild为空。

I have a side navigation component to be used on many pages. This is not a single-page web app. It is dynamically loaded on a parent component that toggles the menu. ContentChild is used to get a handle on the child component so that it can be toggled by setting @input overlayHidden. The problem is that ContentChild is null.

与调试控制台打开运行此 plunker 。从第一页点击控制面板，然后切换菜单从第二页看空指针。

Run this plunker with the debug console open. Click "Dashboard" from the first page, and then "Toggle Menu" from the second page to see the null pointer.

我在做什么错了？

下面是code。

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的隐藏属性的问题），但我认为这将是一个简单的解决方案，如果我能得到它的工作。

I built a publish/subscribe solution that works (except for an issue with the 'hidden' attribute of the overlay div), but I thought this would be a simpler solution if I could get it to work.

推荐答案

由于君特曾建议在他的回答关于 @ContentChild ，此外那你可能会认为这事，结果
与君特讨论 - 见plunker

对不起，我没去成深，你plunker，做你想要进一步实现不算什么。但是，如果你要实施 ViewChild API想想实施 AfterViewInit 钩为好。而且这也与 DynamicComponentLoader 的作品。

As Günter has suggested in his answer about @ContentChild and in addition of that you may think about this,
As discussed with Günter - see plunker
Sorry I didn't go into deep with your plunker and don't what you want to achieve further. But if you're going to implement ViewChild api think about to implement AfterViewInit hook as well. And it also works with DynamicComponentLoader.

这篇关于@ContentChild是空的DynamicComponentLoader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！