为什么 ng-content 会删除我的其余内容？答案

【问题标题】：Why is ng-content removing the rest of my content?为什么 ng-content 会删除我的其余内容？
【发布时间】：2016-05-11 15:07:55
【问题描述】：

启动我的第一个 Angular 2 应用程序，我试图让工作，但是，它正在做奇怪的事情......

我的 main.ts：

import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';

bootstrap(AppComponent, [])
    .then(success => console.log('Bootstrap success'))
    .catch(error => console.log(error));

app.component.ts：

import { Component } from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: '/app/app.component.html'
})

export class AppComponent {
}

和app.component.html：

<div class="container-fluid contentArea">
    Test before
    <ng-content></ng-content>
    Test after
</div>

在我的 index.html 中，我有这个：

<my-app>
    Test
</my-app>

我看到了会发生什么

Test Before Test After

大约 2 秒钟，直到 Angular 启动，然后它清除页面，我只看到

Test

我在这里做错了什么以及如何在我的页面上保留 Test Before Test After？

【问题讨论】：

标签： angular transclusion

【解决方案1】：

不支持对根组件的嵌入。这仅适用于组件模板，但不适用于从 index.html 到组件。

【讨论】：

那么我将如何完成我想要做的事情？
如果你想将index.html中的内容投射到一个组件上，那我猜你运气不好。否则，只需将 <my-app> Test </my-app> 移动到组件中。