Angular 7子组件声明疑问：为何需在AppModule中声明子组件？

嘿，我来帮你理清楚这个Angular模块的问题！你遇到的困惑其实是对Angular模块的声明、导入和导出规则理解有点偏差，咱们一步步拆解：

核心问题出在你的AppModule配置 #

先看你AppModule里的这段代码：

imports: [
  BrowserModule,
  AppRoutingModule,
  CustomersComponent // 这里错了！
],

imports数组的作用是导入其他NgModule，而不是单个组件。你把CustomersComponent直接放进imports是不符合Angular规范的，这也是导致你必须在AppModule声明CustomersListComponent才能运行的根源。

Angular模块的基本规则要记牢 #

1. 组件只能在一个NgModule中声明：你已经在CustomersModule里声明了CustomersListComponent，就绝对不能再在AppModule里重复声明——虽然你说加了之后能运行，但这是不规范的，后续版本可能直接报错。
2. 要使用其他模块的组件，需两步操作：
   • 在组件所属的模块（比如CustomersModule）的exports数组里导出该组件；
   • 在需要使用的模块（比如AppModule）的imports数组里导入整个模块。

修正后的代码示例 #

1. 修正AppModule

把imports里的CustomersComponent换成CustomersModule，同时移除掉对CustomersListComponent的声明（因为它已经在CustomersModule里了）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomersModule } from './customers/customers.module'; // 导入模块

@NgModule({
  declarations: [
    AppComponent
    // 这里不需要声明CustomersListComponent，也不需要CustomersComponent（它在CustomersModule里）
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomersModule // 导入整个模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 你的CustomersModule配置是对的

你已经在CustomersModule里正确声明了两个组件，并且导出了它们，这样其他模块导入CustomersModule后就能使用这两个组件了：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomersComponent } from './customers.component';
import { CustomersListComponent } from './customers-list/customers-list.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CustomersComponent,
    CustomersListComponent
  ],
  exports: [
    CustomersComponent,
    CustomersListComponent
  ]
})
export class CustomersModule { }

为什么之前的错误操作能运行？ #

当你在AppModule里声明CustomersListComponent时，相当于绕开了模块的规范，让AppModule直接认识这个组件，但这违反了Angular模块化的设计思想——如果后续你的项目变大，这种写法会导致组件管理混乱，还可能出现重复声明的错误。

按照上面的修正方法，你只需要在CustomersModule里声明并导出组件，然后在AppModule里导入CustomersModule，就能正常使用CustomersComponent和CustomersListComponent了，不需要在AppModule里声明任何子组件。

内容的提问来源于stack exchange，提问作者Pearson