Comonentのテンプレートはレンダリングされていません

Question

私は角度2の新機能です。 "Header.component.ts"という名前の2つのファイルを配置した "Header"というコンポーネントを構築しようとしました。& "Header.component.html"また、以下のようなようapp.module.tsのファイルで構成された：

import { AppComponent } from './app.component'; 
import {HeaderComponent} from './Header/Header.component'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderComponent 
], 
imports: [ 
    BrowserModule 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

そして、私のHeader.component.tsは、以下のようにようになります。

import {Component} from '@angular/core'; 

@Component({ 
    selector : 'app-header', 
    templateUrl: './Header.component.html' 

}) 
export class HeaderComponent{ 
     HeaderName = 'Its Header'; 
    } 

そして、私のHeader.comonent.htmlは以下のようなものです： `

<h1> 
    Header.. {{HeaderName}} 
    </h1> 

そして、私のIndex.htmlとは、以下のようになります。

<app-header> 
</app-header> 

<app-root> 
</app-root> 

ブラウザでは、デフォルトの1つのapp-rootセレクタを正しく表示できます。私が作成したものとして、私はレンダリングできません。

マイフォルダ構造は、画像の下のようになります。index.htmlの中 enter image description here

Answer 1

あなただけのアプリルートテンプレート内 <app-root></app-root>

を持たなければならない：

<app-header></app-header> 

Answer 2

はこれを試してみてください。
Header.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    selector : 'app-header', 
    templateUrl: './Header.component.html' 

}) 
export class HeaderComponent{ 
    public HeaderName = 'Its Header'; //define as public 
}