如何将大量组件放入另一个组件(模块 -> 模块 -> 模块)

Question

我有一个包装器组件，其中包含(按上下文)其他几个组件。 我还已经在"组件"文件夹中有一个模块，可以完美地导出应用程序的其他组件(菜单、标题等)。

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

但是，如果我将包装模块导入组件.module并在HomeComponent上使用包装器组件，例如它会损坏并且无法识别组件。

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

文件夹结构

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 { }

组件.模块.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 { }

Home.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 的导出部分。