我是 Angular 2 的新手。我尝试创建一个组件，但收到此错误

Question

这是我的

app.component.ts

文件：

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

@Component({
  selector: 'app-root',
  standalone: false,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'frontend';
}

我的

ProjectListComponent

文件

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../../services/project.service';
import { Project } from '../../models/Project';

@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.scss']
})
export class ProjectListComponent implements OnInit {

  projects: Project[] = [];

  constructor(private projectService: ProjectService) { }

  ngOnInit(): void {
    this.projectService.getProjects().subscribe(data => {
      this.projects = data;
    });
  }

}

app.module.ts

文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProjectListModule } from './components/project-list/project-list.module';  

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

以及我尝试在我的

app.component.html

中使用的角度分量：

<app-project-list />

错误：

1. 如果

   app-project-list

   是 Angular 组件，则验证它是否是该模块的一部分。
2. 如果

   app-project-list

   是 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以抑制此消息。

请帮忙！

Answer 1

如果将

ProjectListComponent

添加到

declarations

的

ProjectListModule

数组中，则只能在该特定模块中访问它。

为了在模块导入时与其他模块共享该组件。

您应该使用

exports

数组。这将其暴露在模块之外。

这适用于管道、组件、指令。

@NgModule({
  declarations: [
    ProjectListComponent
  ],
  imports: [
    ...
  ],
  providers: [],
  exports: [ProjectListComponent]
})
export class ProjectListModule { }