Угловые 2 многокомпонентные компоненты

Question

Казалось, я полностью смущен концепцией Angular 2. Я хотел бы иметь три компонента на странице, которая определила этот путь в app.component.html (это должно быть точка входа):

<bp-header></bp-header> 
<bp-home></bp-home> 
<bp-footer></bp-footer> 

И это главный компонент (app.component.ts) :

import { Component }   from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import {HeaderComponent} from "./header.component" 
import {FooterComponent} from "./footer.component" 
import {HomeComponent} from "./home.component" 
@Component({ 
    selector: 'bp-app', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app/app.component.css'], 
    directives: [HeaderComponent, FooterComponent, HomeComponent] 
}) 
export class AppComponent {} 

Нет ничего, когда я открываю домашнюю страницу, а также никаких ошибок в консоли.

Answer 1

Ну, окончательное решение заключается в том, чтобы вставлять директивы заголовка и нижнего колонтитула внутри шаблона таким образом, что bp-header и bp-footer являются отдельными компонентами.

import { Component }   from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import {HeaderComponent} from "./header.component" 
import {FooterComponent} from "./footer.component" 
import {HomeComponent} from "./home.component" 
@Component({ 
    selector: 'bp-app', 
    templat: '<bp-header></bp-header><bp-footer></bp-footer>', 
    styleUrls: ['app/app.component.css'], 
    directives: [HeaderComponent, FooterComponent, HomeComponent] 
}) 
export class AppComponent {}