Angular 角2多分量

我似乎完全混淆了角度2的概念。我希望页面上有三个组件在app.component.html中以这种方式定义（这应该是入口点）：

---

但当我打开主页时，并没有任何错误，控制台中也并没有错误。

好吧，最终的解决方案是将页眉和页脚指令放在模板中，这样，bp页眉和bp页脚是独立的组件

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

从'@angular/core'导入{Component}；
从“@angular/ROUTER”导入{ROUTER_DIRECTIVES}”；
从“/header.component”导入{HeaderComponent}
从“/footer.component”导入{FooterComponent}
从“/home.component”导入{HomeComponent}
@组成部分({
选择器：“bp应用程序”，
模板：“”，
样式URL:['app/app.component.css']，
指令：[HeaderComponent、FooterComponent、HomeComponent]
})
导出类AppComponent{}

是HeaderComponent、FooterComponent、HomeComponent bp header、bp home和bp footer的选择器属性吗？@eltonkamami，是的，没错。文档中是否有

标记？@eltonkamami，此标记在index.htmlc中定义。请用更多代码更新您的问题：）如果有

index.html

和main.ts就最好了？您应该在项目中使用

Angular cli

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

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