Angular 组件不显示答案

【问题标题】：Angular component doesn't show upAngular 组件不显示
【发布时间】：2020-11-20 04:59:00
【问题描述】：

我正在尝试制作一个有角度的网页，并制作一个带有组件的标题。为了制作文件，我使用了制作 html、scss、ts 和 .spec.ts 文件的ng g c commons/header，并像这样修改 app.module.ts 文件：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './commons/header/header.component';
import { FooterComponent } from './commons/footer/footer.component';


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

但是，当我把它放在 index.html 文件中时，组件 html 并没有显示出来。

<!DOCTYPE html>
<head>
  <title>TEST</title>
  <meta name="keywords"
    content="" />
  <meta name="description" content="" />
  <meta name="author" content="Szabó Boldizsár">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
  <link href="styles.scss" rel="stylesheet" type="text/scss">
</head>

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

</html>

通用文件（控制台命令所做的）仍然相同，我没有修改它。有什么问题？我什至在使用 bootswatch。

【问题讨论】：

标签： html angular bootstrap-4

【解决方案1】：

这不是 Angular 的工作方式：你不能只是将你的组件渲染成一个 .html 文件。作为 SPA（单页应用程序），您的内容会呈现到容器中（默认情况下为 app-root）。它建议您遵循官方的 Angular tutorial 来了解组件是如何呈现到应用程序中的。

【讨论】：

你能给我这个视频的链接吗？
当然：youtube.com/watch?v=Ym_T0mvvc7c
从 8:13 开始，他在 AppComponent 中添加页眉和页脚，而不是在 index.html 中

【解决方案2】：

在 Angular 的 index.html 文件中只有 app-root 像这样的标签：

<body>
  <app-root></app-root>
</body>

只需将您的页眉和页脚放在app.component.html 文件中，该文件是您应用程序中所有组件的父组件包装器。

<div class="wrapper">
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</div>

【讨论】：

【解决方案3】：

你必须将页眉和页脚组件的选择器放在 AppComponent 的模板中，而不是放在 Index.html 中。

AppComponent 是您的引导组件，您可以在 @NgModule 元数据属性中看到。您可以将引导数组中提到的组件视为您的角度应用程序的起点。因此，任何其他角度组件都必须在这些 Base 组件内才能显示出来。

另外请参考官方的角度教程。

【讨论】：