Angular2 + Es6. Render child component

Im пытается получить удержание углового2 с ES6, без машинописных текстов. Проблема в том, что я не могу понять, как сделать дочерний компонент. У меня есть этот базовый компонент, который просто держит приложение. В этом компоненте я хочу иметь возможность также отображать, скажем, компонент заголовка и нижний колонтитул. Сейчас только мой базовый компонент получает визуализацию.Angular2 + Es6. Render child component

Как я могу это сделать?

Вот мой код:

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

источник

2016-10-26 user2952238

Я все еще не понимаю. Любой, у кого есть решение? – user2952238

Не могли бы вы добавить свой код в репозиторий github или плункер, чтобы мы могли вам помочь? –

Я думаю, что проблема в том, как вы определяете свои селекторы и шаблоны.

В 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

Я надеюсь, что это помогает.

источник

2016-10-28 15:33:15

Эй, спасибо за ответ, все стало немного понятнее. Теперь отображаются все три элемента (приложение, заголовок, нижний колонтитул). Но верхний и нижний колонтитулы пусты. Как я могу добавить к ним некоторый контент? – user2952238

Я хочу, чтобы из их соответствующих файлов. Как вы видите выше, я хочу заполнить '

' из 'app.header.js'. – user2952238

Это то, что должно происходить. Просто добавьте контент в свой шаблон app.header. Однако вы можете выбрать различные селекторы. Может быть, 'app-header' вместо' header' и 'app-footer' вместо' footer', поскольку 'header' и' footer' являются законными тегами HTML. Я изменю свой ответ, чтобы отразить это. –

ответ

Смежные вопросы