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

【问题标题】：How to put a plethora of components inside another component (module -> module -> module)如何将过多的组件放入另一个组件中（模块 -> 模块 -> 模块）
【发布时间】：2019-10-28 06:21:56
【问题描述】：

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

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

但是，如果我将包装器模块导入到 components.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 { }

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

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 中编写所有组件，这样可以正常工作，但我认为它可以以另一种更文明的方式工作...

你能帮忙吗？

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

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

【讨论】：

嗯。我在办公室测试过，效果很好。但我从描述中重建了它。如果您将工作样本放在 stackblitz 或其他东西上，我可以准确查看缺少的内容。
成功了！！谢啦。我的路由器和路由器防护装置的另一个问题是“挡路”。不知道为什么，但是当路由器解决后，您的解决方案就起作用了。谢谢！！