Question

我试图用ES6抓住angular2，没有打字稿。问题是我无法弄清楚如何渲染子组件。我有这个基本组件，只是持有应用程序。在该组件中，我希望能够渲染一个标题组件和页脚组件。现在只有我的基础组件被渲染。

我该怎么做？

这是我的代码：

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};

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 个答案: