具有<ng-content>的组件
我见过在其他嵌套组件(如here)中使用<ng-content>的工作示例，但我还没有设法在根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非常相似。
回答 2
Stack Overflow用户
发布于 2015-09-15 06:10:26
当您运行您的示例时，您是否注意到加载过程中Hello World!的显示方式？
基本上，<app>和</app>之间的超文本标记语言是用来在Angular启动时显示内容的。
另外，从source
应用程序是在现有的浏览器DOM中引导的，通常是
index.html。与Angular 1不同，Angular 2不会在index.html中编译/处理绑定。这主要是出于安全原因，以及Angular 2中的架构更改。这意味着可以使用绑定等服务器端技术安全地处理index.html。因此，绑定可以使用双卷曲{{ syntax }}，而不会与角度2分量双卷曲{{ syntax }}发生冲突。
重要的部分是Angular 2 does not compile/process bindings in index.html。因此，为了执行您想要的操作，您必须将ng-content移动到子组件。
Stack Overflow用户
发布于 2016-02-17 06:30:31
事实证明，如果您打算提供文本内容，这是可能的。如果您想要角度组件，可以使用正确的HTML元素(noscript)。有人可能会说，这有点老生常谈。诀窍是使用<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>要好得多，因为不应该有任何大小写转换。
https://stackoverflow.com/questions/32568808
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号