组件选择器不是已知元素

Question

我有 2 个模块 AppModule 和 MyArtModule，其中声明了一些组件。

当我尝试在GraphicsComponent 中使用ConfirmComponent 选择器时，它工作正常，但是当我尝试在MyArtComponent 中使用ConfirmComponent 选择器时，它抛出错误'artifi-confirm-alert' is not a known element:

'artifi-confirm-alert' 不是已知元素：

1. 如果 'artifi-confirm-alert' 是一个 Angular 组件，则验证它是该模块的一部分。

2. 如果“artifi-confirm-alert”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 禁止显示此消息。

• 应用模块
  • 图形组件
  • 确认组件
  • MyArt 模块
    • 我的艺术组件

---

AppModule 代码

@NgModule({
  declarations: [
    GraphicsComponent,
    ConfirmAlertComponent
  ],
  imports: [
    BrowserModule,
    MyArtModule
  ],
  ...
})

---

MyArtModule 代码

@NgModule({
  declarations: [
    MyArtComponent,
  ],
  imports: [
    CommonModule
  ],
  providers: [
    MyArtService
  ],
  exports: [
    MyArtComponent
  ]
})

---

复制的问题代码 - https://stackblitz.com/edit/skdroid-childmodule-in-child-component

我已经创建了 OneModule 和 OneComponent 和 TwoModule 和 TwoComponent。

<app-one></app-one> 和 <app-two></app-two> 可以在 AppComponent 中访问。

但无法访问 AppOne 组件中的<app-two></app-two>。

Answer 1

您的 ConfirmComponent 和 GraphicsComponent 在同一个模块中！于是他们就认识了！ 但是您正在尝试将该 ConfirmComponent 用于另一个模块中的另一个组件（在您的情况下： MyArtModule ），它不知道该组件是否存在！

您必须导出 ConfirmComponent 以使其对整个应用程序启用！

在AppModule的exports数组中添加ConfirmComponent

exports: [
  ConfirmComponent
]

Answer 2

您正试图在子模块组件中访问父模块组件。创建一个共享模块并在其中添加组件。

@NgModule({
  declarations: [ConfirmComponent],
  exports: [ConfirmComponent],
})

export class SharedModule {
}

并将其添加到 AppModule 中：

@NgModule({
  declarations: [
    GraphicsComponent,
  ],
  imports: [
    BrowserModule,
    MyArtModule,
    SharedModule
  ],
  ...
})

并将其导入您的 ArtModule：

@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  declarations: [ConfirmAlertComponent],
  exports: [
    ConfirmAlertComponent
  ]
})
export class MyArtModule { }

Stackblitz