Angular 如何在另一个组件中使用组件

Question

我有 2 个组件，第一个是 modules/pages/home/home.component，第二个是 modules/pages/home/components/banner 我想在 home 组件中使用横幅组件。 当我尝试使用时出现此错误

1. 如果 'app-banner' 是一个 Angular 组件，那么验证它是这个模块的一部分。
2. 如果“app-banner”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 我该如何解决这个问题？

Answer 1

从您的文件夹结构看来，这两个组件应该是同一个模块的一部分。

所以去home.module.ts或任何你有的@NgModule ，并确保app-banner是declarations数组的一部分。

或者，如果app-banner是单独模块的一部分，请确保将其他模块添加到home.module的import数组中。

Answer 2

您的项目中应该有一个app.module.ts文件，在其中您会找到@NgModule ，然后应该有declarations属性（它是一个数组）。 尝试在其中插入BannerComponent并使用home.component.html中的选择器调用横幅组件。

Answer 3

1. 要使用组件“A”，该组件必须在模块中声明
2. 要在另一个组件“B”中使用组件“A”，这两个组件可以在同一个模块或不同模块中声明（想象在模块“A”和模块“B”中声明）但是，在这种情况下，模块“A”必须“导出”组件“A”，模块“B”必须导入模块“A”

在同一个模块

@NgModule({
  imports: [...],
  declarations: [AComponent,BComponent,...],
})
export class AllInOneModule {}

在不同的模块中

//Module "A"
@NgModule({
  imports: [...],
  declarations: [AComponent,...],
  exports: [AComponent],
})
export class AModule {}

//Module "B"
@NgModule({
  imports: [AModule...],
  declarations: [BComponent,...],
})
export class BModule {}

Answer 4

导入并在 app.moudle.ts 中声明组件后，它可以工作