Angular 组件不会显示模板答案

【问题标题】：Angular component won't display templateAngular 组件不会显示模板
【发布时间】：2019-05-21 17:17:16
【问题描述】：

我有一个简单的角度应用程序。这是教程中的待办事项应用程序。我想添加第二个组件。我文件夹应用程序我现在有文件夹 new-component1。在这个文件夹中，我有四个文件：

在 new-component1.component.ts 我有：

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

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

  constructor() { }

  ngOnInit() {
  }

}

在 new-component1.component.html 文件中，我只有一个段落，其中包含要显示的示例文本。我的 app.module.ts 看起来像这样：

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

import { AppComponent } from './app.component';
import { NewComponent1Component } from './new-component1/new-component1.component';

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

NewComponent1Component 被添加到声明中。 Everythink 编译没有错误。但是当我想在 index.html 中显示来自组件的数据时：

<body>
  <app-root></app-root>
  <app-new-component1></app-new-component1>
</body>

什么都不显示。仅显示 app-root 的内容。这是使用 todo-app 生成的第一个组件。如何显示来自我的组件的数据？

【问题讨论】：

angular.io/guide/architecture#components
你应该将你的 app-new-component-1 移动到你的主组件的模板中
bootstrap: [AppComponent] 是被引导的那个.. 所以<app-root></app-root> 将包含所有其他组件.. 将您的选择器放在app.component.html 中

标签： angular components

【解决方案1】：

例如，不应将app-new-component1 标记放入index.html 文件中，而应将其放入app.component.html 文件中。您实际上是将 Angular 组件放置在 Angular 应用程序之外。

【讨论】：