Angular 2：组件不渲染答案

【问题标题】：Angular 2: Component doesn't renderAngular 2：组件不渲染
【发布时间】：2016-09-13 15:00:30
【问题描述】：

我在 Angular 2 中使用自定义组件，但它不呈现。我不知道为什么它不渲染。

尝试1：这是使用组件的html页面（不起作用）：

<div class="container-fluid container-content" *ngIf="project">
    <div class="projectdetail" style="background: green">
        <img [src]="project.img" [alt]="project.name" style="height: 150px" />
        <h2>{{project.name}}</h2>
        <div>
            <carousel interval="5000" noWrap="false">
            <slide *ngFor="let slidez of slides; let index=index">
                    <img [src]="slidez.image" class="carouselimg" />
                    <div class="carousel-caption">
                        <h4>Slide {{slidez.id}}</h4>
                        <p>{{slidez.text}}</p>
                    </div>
                </slide>
            </carousel>
        </div>
        <p>{{project.description}}</p>
    </div>
    <!--hidden-mm hidden-sm hidden-xs-->
    <div class="projects" style="background: red">
        qsdfqsdfqsdf
        <projectlist></projectlist>
    </div>     
</div>

截图（无）

尝试 2：当我将 projectlist 标签放在 div 中时，它确实有效。奇怪吗？

<div class="container-fluid container-content" *ngIf="project">
    <div class="projectdetail" style="background: green">
        <img [src]="project.img" [alt]="project.name" style="height: 150px" />
        <h2>{{project.name}}</h2>
        <div>
            <carousel interval="5000" noWrap="false">
            <slide *ngFor="let slidez of slides; let index=index">
                    <img [src]="slidez.image" class="carouselimg" />
                    <div class="carousel-caption">
                        <h4>Slide {{slidez.id}}</h4>
                        <p>{{slidez.text}}</p>
                    </div>
                </slide>
            </carousel>
        </div>
        <p>{{project.description}}</p>
<!-- ADDED THIS-->
        <projectlist></projectlist>
    </div>
    <!--hidden-mm hidden-sm hidden-xs-->
    <div class="projects" style="background: red">
        qsdfqsdfqsdf
        <projectlist></projectlist>
    </div>     
</div>

屏幕截图（只显示一次（第二个项目列表而不是第一个））

我在其他地方使用了该组件，它实际上可以正常工作，所以不知道问题出在哪里。

这是一个github链接：Github

如果您需要更多信息或代码，请询问。

【问题讨论】：

您检查浏览器控制台是否有错误？
@GünterZöchbauer 是的，没有错误:)
如果你没有看到自定义组件，这意味着你忘记告诉 Angular 这个组件。检查您是否为此组件定义了指令（rc4）或声明（rc5）。
奇怪的是为什么我把它放在上面的div中时它显示，它实际上只显示了一次
当你将console.log('xxx')添加到组件的构造函数中时，这两种情况都会打印到控制台吗？

标签： javascript angular

【解决方案1】：

我调查了一下这个问题，发现这个问题只出现在 chrome 浏览器中。

Chrome 从ProjectListComponent 发送带有奇怪标头的请求

作为解决方法，您可以通过技巧来解决它

projectlist.component.ts

ngOnInit() {
  setTimeout(() => this.getProjects(), 0);
}

【讨论】：