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