Question

当我为网站提供服务并检查页面时，我可以在Chrome开发者工具中看到选择器，但模板中的html没有显示。该组件是直接从angular cli添加的，我所做的就是将开启/关闭选择器标签添加到index.html文件中。控制台中没有错误。

以下是我在Chrome DOM中看到的内容：

<body>
<app-header></app-header>
<app-root></app-root>
<app-footer></app-footer>

footer.component.ts：

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

footer.component.html

<p>
  footer works!
</p>

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';


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

运行： npm版本5.5.1 Angular 5.1.0 角度cli 1.6.0

在Visual Studio Code中使用命令行中的ng-serve。

Answer 1

我非常确定您的AppModule个bootstrap数组中包含[AppComponent]。这就是Angular应用程序的启动方式。你引导一个模块AppModule并在模块的引导程序数组中，有AppComponent。因此<app-root></app-root>中的任何内容都将成为您的Angular App呈现的位置。

您可能希望将<app-header></app-header>和<app-footer></app-footer>放入App.component.html

中

Answer 2

oops你应该添加你的

<app-header></app-header> 
and 
<app-footer></app-footer>

app.component.html中的

不在index.html

中

来自angularcli的生成组件未呈现模板

2 个答案: