角度2の複数のコンポーネント

Question

私はAngular 2のコンセプトと完全に混同しているようでした。私は（これはエントリーポイントであるべきである）app.component.htmlで、このように定義されたページにある3つの要素を持っているしたいと思います：

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