Angular2 + Es6。渲染子组件
Angular2 + Es6。渲染子组件
提问于 2016-10-26 13:07:06
我正试图用angular2和ES6联系，而不是TypeScript。问题是，我不知道如何呈现子组件。我有这个基本组件，它只支持应用程序。在这个组件中，我希望也能够呈现，比如说，一个标头组件和一个页脚组件。现在只有我的基本组件被呈现。
我该怎么做？
这是我的密码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<application>
<header></header>
</application>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/dist/js/app.js"></script>
</body>app.js
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Header} from './components/app.header';
class Base {
static get annotations() {
return [
new Component({
selector: "body",
template: '<application>base</application>'
}),
];
}
constructor () {}
}
export {Base};
bootstrap(Base);app.header.js
import {Component} from 'angular2/core';
class Header {
static get annotations() {
return [
new Component({
selector: 'header',
template: '<h1>header</h1>'
}),
];
}
constructor () {}
}
export {Header};回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-28 15:33:15
我认为问题在于如何定义选择器和模板。
In index.html
更改：
<body>
<application>
<header></header>
</application>转入：
<body>
<application></application>In app.js
new Component({
selector: "application",
template: '<app-header></app-header>'
}),然后，您可以更改app.js模板以包含页脚：
new Component({
selector: "application",
template: '<app-header></app-header><app-footer></app-footer>'
}),在标签之间通常不需要任何东西：
<application>Nothing goes here</application>
<app-header>Nothing goes here</app-header>
<app-footer>Nothing goes here</app-footer>除非这些是类似于*ngIf或*ngFor的“结构指令”。这是文件：
https://angular.io/docs/ts/latest/guide/structural-directives.html
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40263146
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号