Question

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

当我尝试在ConfirmComponent中使用GraphicsComponent选择器时，它工作正常，但是当我试图在ConfirmComponent中使用MyArtComponent选择器时，它会抛出错误{{1} }

“ artifi-confirm-alert”不是已知元素：



如果'artifi-confirm-alert'是Angular组件，则请验证它是否属于此模块。



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

AppModule
- GraphicsComponent
- ConfirmComponent
- MyArtModule
  - MyArtComponent

AppModule代码

'artifi-confirm-alert' is not a known element:

MyArtModule代码

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

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

我用@NgModule({ declarations: [ MyArtComponent, ], imports: [ CommonModule ], providers: [ MyArtService ], exports: [ MyArtComponent ] })创建了OneModule，并用OneComponent创建了TwoModule。

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

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

Answer 1

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

@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

Answer 2

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

您必须导出ConfirmComponent使其启用到所有应用程序！

在导出的AppModule数组中添加ConfirmComponent

exports: [
  ConfirmComponent
]

组件选择器不是已知元素

2 个答案: