Angular 2多个组件

andrey.shedko 发表于 Dev

安德烈·谢德科（Andrey.shedko）

似乎我完全对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 {}

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

安德烈·谢德科（Andrey.shedko）

好吧，最终的解决方案是以这种方式将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 {}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。