我已经看到了<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哲学或其他东西,所以它甚至不支持,但我的用例与我认为的第一个工作演示非常相似.
我有以下嵌套组件的结构.
<app-root>
<app-comp-1>
<app-comp-2>
</app-comp-2>
</app-comp-1>
<app-root>
我想将任何内容转换为最后一个孩子(app-comp-2).所以,我需要这样的东西.
<app-comp-1>
<app-comp-2>
<ng-content></ng-content>
</app-comp-2>
</app-comp-1>
但是在app-root组件中只有app-comp-1组件可用.所以,这是我必须转录我的内容的地方.
<app-root>
<app-comp-1>
<content-I-want-to-transclude></content-I-want-to-transclude>
</app-comp-1>
</app-root>
---------------------------
<app-comp-1>
<ng-content></ng-content>
<app-comp-2>
...
</app-comp-2>
</app-comp-1>
所以我需要一个解决方案来获取已被转换为第一个组件的内容并将其传递给第二个组件.
angular ×2