Question

我只用一个组件就可以简单地应用于角度。这是教程中的待办事项应用程序。我想添加第二个组件。我在文件夹应用程序中现在有文件夹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>

不显示任何内容。仅显示应用程序根目录的内容。这是使用todo-app生成的第一个组件。如何显示组件中的数据？

Answer 1

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

角度组件将不会显示模板

1 个答案: