Angular 2 mehrere Komponenten

Question

Es schien wie ich komplett mit Angular 2-Konzept verwechselt. Ich möchte drei Komponenten auf der Seite haben, die auf diese Weise in app.component.html definiert (dies ist sollte den Einstiegspunkt sein):

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

Und das ist Hauptbestandteil (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 {} 

Bu gibt es nichts, wenn ich Homepage öffne sowie keine Fehler in der Konsole.

Answer 1

Nun, endgültige Lösung ist, Header-und Footer-Direktiven innerhalb der Vorlage auf diese Weise, dass BP-Header und BP-Footer separate Komponenten sind.

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