Comonent 的 templateurl 不呈现

Question

我是 angular 的新手 2. 我曾尝试构建一个名为 "Header" 的组件，我在其中放置了两个名为 "Header.component.ts" 和 "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>

在浏览器中，我能够正确查看默认的一个应用程序根选择器。我创建的那个我无法渲染。

我的文件夹结构如下图所示： enter image description here

Answer 1

在index.html你只能 <app-root></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 
 }

Comonent 的 templateurl 不呈现

Comonent's templateurl not rendering

angularjs

angular2-template