关于如何在运行时动态创建组件，我正在关注this cookbook。只要我尝试使用<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current"><a href="Home.html">Home</a></li>
<li><a href="cv.html">Curriculum Vitae</a></li>
<li><a href="pc.html">PC Gaming</a></li>
<li><a href="#">Memes</a>
<ul>
<li><a href="#">Hot</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">Upload File</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header> 引用的元素在另一个元素中不是transcluded (aka Content Projection in Angular 2)，这一切都很有效。
让我详细说明一下。我有这段代码：
@ViewChild我的@Component({
selector: 'module-landing',
templateUrl: './module-landing.template.html',
entryComponents: [TravelHeaderContentComponent]
})
export class ModuleLandingComponent implements AfterViewInit {
@ViewChild(ContentHostDirective) contentHost: ContentHostDirective;
ngAfterViewInit() {
console.log(this.contentHost);
}
}
看起来像这样：
module-landing.template.html到目前为止，这么好。 <some-other-component></some-other-component>
<ng-template content-host></ng-template>
按预期输出对象。
但是，我需要在console.log()中转换content-host元素，如下所示：
some-other-component这倒下了。 <some-other-component>
<ng-template content-host></ng-template>
</some-other-component>
引用现在是@ViewChild()。将undefined更改为@ViewChild()无效。
我该怎么做？