我见过工作示例<ng-content>正在另一个嵌套组件中使用（例如here http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn）但我还没有设法在根 Angular2 组件中运行它：
HTML 模板：
<html>
<body>
<app>
<h1>Hello, World!</h1>
</app>
</body>
</html>
TypeScript 中的 Angular 2 组件：
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'app'
})
@View({
template: 'Header: <ng-content></ng-content>',
})
export class App {
}
bootstrap(App);
我期望这会生成：
<app>
Header: <h1>Hello, World!</h1>
</app>
但它没有并且内容<app>被忽略。请参阅演示Plunker http://plnkr.co/edit/dJlA4SQpy8pnrdyDiy9u.
我想这可能违背了 Angular 2 的一些哲学或其他东西，所以它甚至不受支持，但我的用例与第一个非常相似工作演示 http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn我认为。
当您运行示例时，您是否注意到如何Hello World!加载时显示？
基本上，HTML 之间<app> and </app>用于在 Angular 启动时显示某些内容。
另外，从source https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L55:
应用程序通常在现有浏览器 DOM 内引导index.html。与 Angular 1 不同，Angular 2 不会编译/处理以下位置的绑定index.html。这主要是出于安全原因，以及 Angular 2 中的架构更改。这意味着index.html可以使用服务器端技术（例如绑定）安全地进行处理。因此，绑定可以使用双卷曲{{ syntax }}没有来自 Angular 2 组件双卷曲的碰撞{{ syntax }}.
重要的部分是Angular 2 does not compile/process bindings in index.html。所以，为了做你想做的事，你必须移动ng-content到子组件。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
