Question

I've seen working examples when <ng-content> is beeing used inside other nested components (like here http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn) but I haven't managed to run it inside a root Angular2 component:

HTML template:

<html>
    <body>
        <app>
            <h1>Hello, World!</h1>
        </app>
    </body> 
</html>

Angular2 component in typescript:

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'app'
})
@View({
    template: 'Header: <ng-content></ng-content>',
})
export class App {
}

bootstrap(App);

I'd expect that this will generate:

<app>
    Header: <h1>Hello, World!</h1>
</app>

but it doesn't and the content of <app> is ignored. See demo on Plunker http://plnkr.co/edit/dJlA4SQpy8pnrdyDiy9u.

I thought maybe this goes agains some Angular2 philosophy or something so it's not even supported but my use case is very similar to the first working demo I think.

Answer 1

运行示例时，您是否注意到在加载过程中如何显示Hello World!？

基本上<app>和</app>之间的html用于在Angular启动时显示某些内容。

另外，来自source：

应用程序在现有浏览器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移动到子组件。

Answer 2

如果您打算提供文字内容，原来可以。如果你想要Angular组件，可以使用正确的HTML元素（noscript）。有人可能会说，有点hacky。诀窍是使用<noscript>元素。

HTML模板：

<noscript id="appContent">
   <h1>Hello, World!</h1>
   <a [routerLink]="['Home']">Home</a>
</noscript>
<script>
    var mainTemplate = document.getElementById('appContent');
    window.mainTemplate = mainTemplate.innerText;
</script>

根组件：

import {Component, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'app',
    template: 'Header: ' + window.mainTemplate ,
})
export class App {
}

bootstrap(App);

确保Angular 2代码位于模板定义之后。

仅在使用<template>标记时才适用：问题是最近（http://angularjs.blogspot.com.br/2016/02/angular-2-templates-will-it-parse.html）Angular 2带来了自己的解析器，模板区分大小写。在浏览器环境中不是HTML的情况。这意味着浏览器可能无法将此案例放在此模板上的属性和元素中。

更新：我在原始解决方案中有一个<template>元素。 <noscript>要好得多，不应该是任何转换。

Angular2 root component with <ng-content>

2 个答案: