Comonent의 템플릿이 렌더링되지 않았습니다.

Question

저는 2 앵귤러입니다. "Header.component.ts"& "Header.component.html"이라는 파일 두 개를 배치했는데 "Header"라는 구성 요소를 만들려고했습니다. 또한 아래 등 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> 

브라우저에서 기본 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 
}