Angular技术求助：如何从父模块向两个子模块共享非模块组件？

我来帮你搞定这个组件共享的问题，你现在的写法犯了两个关键的Angular模块使用错误，咱们一步步修正：

问题根源 #

你把SharedOne组件声明在了ScopeModule里，然后让ScopeModule导入FeatureOneModule和FeatureTwoModule——但Angular模块的依赖是单向的，Feature模块并没有导入ScopeModule，所以它们根本访问不到ScopeModule里声明的SharedOne组件。而且Angular里共享组件的标准做法是把它们放在单独的**共享模块（SharedModule）**中，而不是混杂在其他业务模块里。

正确的解决步骤 #

1. 创建/改造SharedModule #

首先把SharedOne组件迁移到专门的SharedModule里，这个模块负责声明并导出所有需要共享的组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 如果组件用到*ngIf、*ngFor等指令必须导入这个
import { SharedOne } from "./shared-one.component";

@NgModule({
  declarations: [SharedOne], // 声明共享组件
  imports: [CommonModule],
  exports: [SharedOne] // 导出组件，让其他模块能使用它
})
export class SharedModule { }

2. 修改ScopeModule #

从ScopeModule里移除SharedOne的声明和导出，因为它不再负责托管这个共享组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { FeatureOneModule } from './feature1/feature-one.module';
import { FeatureTwoModule } from './feature2/feature-two.module';
import { ScopeRoutesModule } from './setup-config.routes';
import { SetupConfig } from "./setup-config.component";
// 移除SharedOne的导入语句

@NgModule({
 declarations:[SetupConfig], // 只保留当前模块的组件
 imports: [ FormsModule, ScopeRoutesModule, FeatureOneModule, FeatureTwoModule ],
 exports:[RouterModule] // 移除SharedOne的导出
})
export class ScopeModule { }

3. 在功能模块中导入SharedModule #

分别在FeatureOneModule和FeatureTwoModule里导入SharedModule，这样它们就能直接使用SharedOne组件了：

// FeatureOneModule示例，FeatureTwoModule完全同理
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared-component/shared.module'; // 导入共享模块
// 导入FeatureOne的自有组件，比如FeatureOneComponent等

@NgModule({
  declarations: [/* 这里放FeatureOne模块的专属组件 */],
  imports: [
    CommonModule,
    SharedModule, // 关键：导入共享模块后就能用SharedOne了
    // 其他需要的模块，比如RouterModule、FormsModule等
  ],
  // 如果需要导出组件就写在这里，不需要可以留空
  exports: []
})
export class FeatureOneModule { }

为什么这样能行？ #

Angular的核心规则是：

• 一个组件只能被一个模块声明
• 其他模块要使用这个组件，必须导入声明该组件的模块，并且该组件已经被这个模块导出

你之前的写法相当于让ScopeModule依赖Feature模块，但Feature模块没有反向依赖ScopeModule，自然拿不到SharedOne。用共享模块的方式，就把共享组件的管理权统一交给了SharedModule，所有需要用它的业务模块只要导入SharedModule就行，这也是Angular官方推荐的共享模式。

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