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

好吧，最终解决方案是将header和footer指令放在模板中，这样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 {}

Angular 2多个组件

1 个答案: