Question

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

我想要的是为此组件包装器创建一个模块，将其导入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 { }

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

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

1 个答案: