如何将过多的组件放入另一个组件中（模块 -> 模块 -> 模块）

Question

我有一个包含（根据上下文）其他几个组件的包装器组件。我也已经在文件夹 "components" 中有一个模块，可以完美地导出应用程序的其他组件（菜单、headers 等）。

我想要的是为这个组件包装器创建一个模块，将其导入 components.module 并使其对整个应用程序可见，保持组织整洁。

但是如果我将 wrapper-module 导入 components.module 并在 HomeComponent 上使用 wrapper-component 例如它会损坏并且无法识别该组件。

这是我的代码，有什么帮助吗？

文件夹结构

components

    wrapper-component
        comp1
        comp1
        wrapper-component.module.ts
    menu
    topnavbar
    components.module.ts

pages
    home
        home.module.ts

wrapper-component.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

/** COMPONENTS */
import { WrapperComponent } from './wrapper.component';
import { ChildComponent1 } from './comp1/comp1.component';
import { ChildComponent2 } from './comp2/comp2.component';

@NgModule({
  declarations: [
    WrapperComponent,
    ChildComponent1
    ChildComponent2
  ],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [
    WrapperComponent,
    ChildComponent1
    ChildComponent2
  ]
})
export class WrapperComponentsModule { }

components.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';

    /** MODULES */
    import { WrapperComponentsModule } from './wrapper-component/wrapper-component.module';

.. other components imports

    @NgModule({
      declarations: [
.. other components declarations (works fine)
      ],
      imports: [
        CommonModule,
        IonicModule,
        WrapperComponentsModule 
      ],
      exports: [
.. other components exports (works fine)
      ]
    })
    export class ComponentsModule { }

家.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { ComponentsModule } from './../../components/components.module';

import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    ComponentsModule,
    ..other imports
  ],
  declarations: [
    HomeComponent,
  ]
})
export class HomePageModule {}

我知道我可以简单地将所有组件写在 ComponentsModule 中，这样可以很好地工作，但我认为它可以以另一种更文明的方式工作...

你能帮忙吗？

Answer 1

您需要将 WrapperComponentsModule 添加到 components.module.ts 的导出部分。

如何将过多的组件放入另一个组件中（模块 -> 模块 -> 模块）

How to put a plethora of components inside another component (module -> module -> module)

ionic-framework

angular

ionic4