app.module.ts中声明的Angular子HTML引用组件

Question

对必须是简单的概念感到尴尬：

app.module
    declares  NavComponent  <-- to be used see below
              SplashPage    <-- successfully references NavComponent
    exports   NavComponent
    imports   PreRegistrationModule

PreRegistrationModule   <- a "child" of app module
    imports   OverviewModule

  OverViewModule        <- a "child of PreRegistration module
      declares  HowToUseThisProgramComponent

    HowToUseThisProgramComponent   <- a "child of OverView module
        HowToUse.html  contains  <app-nav></app-nav>  <- defined in NavComponent

我的（误解）是，我应该能够在HowToUseThisProgram.html中使用NavComponent，因为它是app.module的后代，其中NavComponent被声明（并导出）。

我收到错误消息“ app-nav”不是一个已知的元素……但是，app-nav在SplashPage组件中的工作正常，该组件与PreRegistration Module处于同一级别。

我无法将NavComponent'导入'到任何子模块，因为（我认为）使NavComponent成为一个以上模块（非法）的子级。

我想念的是什么？在此先感谢Chuck（“ Yogi”）

Answer 1

这里的问题是NavComponent属于AppModule，它不属于OverViewModule。另一方面，您可以在SplashPage中直接使用它，因为它们都在同一个模块中。

如果要使用NavComponent，则应创建一个新模块，可以在其中声明，导出它，然后应将其导入AppModule和OverViewModule。

例如：

@NgModule({
  declarations: [
    NavComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    NavComponent,
  ]
})
export class SharedComponentsModule { }

然后在AppModule中：

@NgModule({
  declarations: [
    NavComponent
  ],
  imports: [
    CommonModule,
    SharedComponentsModule
  ],
})
export class AppModule { }

最后在OverViewModule中：

@NgModule({
  declarations: [
    HowToUseThisProgramComponent
  ],
  imports: [
    CommonModule,
    SharedComponentsModule
  ],
})
export class OverViewModule { }