app.module.ts 中声明的角度子 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，因为它是声明（和导出）NavComponent 的 app.module 的后代。

我得到错误 'app-nav' is not a known element... 但是，app-nav 在 SplashPage 组件中工作正常，它与 PreRegistration 模块处于同一级别。

我不能将 NavComponent “导入”到任何子模块，因为（我认为）使 NavComponent 成为多个模块的子模块（非法）。

我错过了什么？
提前致谢，Chuck（“Yogi”）

Answer 1

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

如果你想使用 NavComponent，你应该创建一个新的 Module，你可以在其中声明它，导出它，然后你应该导入 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 { }