带有 <ng-content> 的组件答案

【问题标题】：Component with <ng-content>带有 <ng-content> 的组件
【发布时间】：2015-09-14 15:44:42
【问题描述】：

当<ng-content> 在其他嵌套组件（如here）中使用时，我已经看到了工作示例，但我没有设法在根 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 上的演示。

我认为这可能与某些 Angular 2 哲学或某些东西相悖，因此它甚至不受支持，但我的用例与我认为的第一个 working demo 非常相似。

【问题讨论】：

标签： angular

【解决方案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移动到一个子组件。

【讨论】：

【解决方案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，情况并非如此。这意味着浏览器可能不会在此模板 hack 的属性和元素中保留大小写。

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

【讨论】：