Angular组件如何在懒加载模块中使用？声明方法咨询

你现在遇到的是Angular模块机制里的典型场景：组件只能在一个NgModule的declarations数组中声明，如果直接在AppModule里声明了FpgTimeComponent，懒加载模块是没法直接访问它的——因为懒加载模块是独立的模块，不会继承AppModule的组件声明。

解决思路很清晰：创建一个**共享模块（Shared Module）**来托管需要复用的组件，然后在所有需要使用该组件的模块（包括AppModule和懒加载模块）中导入这个共享模块。具体步骤如下：

1. 创建共享模块 #

新建一个shared.module.ts文件，把共享组件放到这里声明并导出：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FpgTimeComponent } from './fpgTime/fpg-time.component'; // 导入你的组件

@NgModule({
  declarations: [
    FpgTimeComponent // 在这里声明共享组件
  ],
  imports: [
    CommonModule // 如果组件用到*ngIf、*ngFor这类内置指令，必须导入CommonModule
  ],
  exports: [
    FpgTimeComponent // 导出组件，确保其他模块导入后能访问它
  ]
})
export class SharedModule { }

2. 调整AppModule的配置 #

把原来在AppModule的declarations里的FpgTimeComponent移除，然后导入刚刚创建的SharedModule：

import { SharedModule } from './shared.module'; // 导入共享模块

@NgModule({
  declarations: [
    AppComponent,
    // 删掉FpgTimeComponent的声明，组件只能在一个模块里声明
    (...)
  ],
  imports: [
    BrowserModule,
    SharedModule, // 导入后，AppModule下的组件就能正常使用FpgTimeComponent了
    (...)
  ],
  (...)
})
export class AppModule { }

3. 在懒加载模块中导入SharedModule #

以你的懒加载模块（比如CustomerModule）为例，在它的模块文件里导入SharedModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared.module'; // 导入共享模块
import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerComponent } from './customer.component';

@NgModule({
  declarations: [
    CustomerComponent
  ],
  imports: [
    CommonModule,
    CustomerRoutingModule,
    SharedModule // 导入后，该模块下的所有组件都能使用FpgTimeComponent
  ]
})
export class CustomerModule { }

关键注意事项 #

• 组件绝对不能在多个模块的declarations里重复声明，否则Angular会直接报错。
• 共享模块必须导出需要复用的组件，不然其他模块导入了也用不了。
• 除了AppModule用BrowserModule外，其他模块（包括共享模块）都应该用CommonModule来引入内置指令。

这样调整后，不管是AppModule下的组件，还是懒加载模块里的组件，都能正常使用FpgTimeComponent啦！

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