Angular 14中如何在独立组件中引入其他模块的子组件？

核心原因 #

你的MyModule仅声明了ChildComponent，但未将其对外导出，导致独立组件ParentComponent即便导入了MyModule，也无法访问到内部的ChildComponent。另外错误提示中的app-child-component和你模板里的<child-component>不匹配，也需要核对一致。

具体修复步骤 #

1. 修改MyModule，导出ChildComponent #

在MyModule的@NgModule装饰器中添加exports数组，将ChildComponent加入其中，这样外部模块/独立组件才能访问到它：

/* imports */

@NgModule({
  declarations: [
    ChildComponent
  ],
  imports: [
    ...
  ],
  exports: [
    ChildComponent // 新增导出配置，暴露组件给外部使用
  ]
})
export class MyModule { 
  constructor(entityDefinitionService: EntityDefinitionService) {
    ...
  }
}

2. 核对组件选择器一致性 #

错误提示显示未找到app-child-component，但你的模板里使用的是<child-component>，需要确保ChildComponent的selector与模板中的标签完全匹配：

• 如果ChildComponent的selector是app-child-component，则模板需修改为：

  <div>
      <app-child-component></app-child-component>
  </div>
  

• 如果要保留模板中的<child-component>，则修改ChildComponent的装饰器：

  @Component({
    selector: 'child-component', // 与模板标签一致
    templateUrl: './child.component.html',
    ...
  })
  export class ChildComponent {}
  

3. 确保模块依赖正常 #

MyModule的构造函数注入了EntityDefinitionService，需确认该服务已在MyModule的imports中引入的模块里提供，或者在全局注入，避免后续出现服务找不到的错误。

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