Question

我是角色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>

在浏览器中，我能够正确查看默认的一个app-root选择器。我创建的那个我无法渲染的地方。

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

Answer 1

试试这个。
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 
 }

Answer 2

在index.html中你应该只有 <app-root></app-root>

在app-root模板中：

<app-header></app-header>

Comonent的templateurl无法渲染

2 个答案: