Angular2 + Es6。渲染子组件

Question

我正在尝试使用 ES6 来获取 angular2，而不是 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>

应用程序.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};

Answer 1

我认为问题在于您如何定义选择器和模板。

在 index.html

改变：

<body>
    <application>
        <header></header>
    </application>

进入：

<body>
    <application></application>

在 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

我希望这会有所帮助。

Angular2 + Es6。渲染子组件

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-10-28 15:33:15

Angular2 + Es6。 渲染子组件

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-10-28 15:33:15

Angular2 + Es6。渲染子组件

解决方案1
2 已采纳 2016-10-28 15:33:15