在< ng-content>中,我看到了工作示例是在其他嵌套组件中使用(像这里的
http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn),但是我没有设法在根Angular2组件中运行它：
HTML模板：
- <html>
- <body>
- <app>
- <h1>Hello,World!</h1>
- </app>
- </body>
- </html>
字体中的Angular2组件：
- 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演示.
我认为也许这会再次出现一些Angular2的哲学或者其他东西,所以它甚至不被支持,但我的用例非常类似于我认为的第working demo号.
当你运行你的例子时,你注意到Hello World！在加载过程中显示？
基本上,< app>之间的html和< / app>用于在Angular启动时显示某些内容.
另外,从source：
An application is bootstrapped inside an existing browser DOM,typically
index.html. Unlike Angular 1,Angular 2 does not compile/process bindings inindex.html. This is mainly for security reasons,as well as architectural changes in Angular 2. This means thatindex.htmlcan safely be processed using server-side technologies such as bindings. Bindings can thus use double-curly{{ Syntax }}without collision from Angular 2 component double-curly{{ Syntax }}.
重要的部分是角度2不会在index.html中编译/处理绑定.所以,为了做你想要的,你必须将内容移动到一个子组件.
