Question

我想在不同的模块中使用某些组件。目前，我的模块化系统的结构如下

app.modules.shared
- footerModules
- AdministrationModule
- profileModule

现在，您想创建一个组件，例如InputControlComponent，可以在AdministrationModule的组件以及ProfileModule中使用。

我的第一个想法是

app.modules.shared
- footerModules
- AdministrationModule
- profileModule
- SharedModules

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

import { InputControlComponent } from './form/inputControl.component';

@NgModule({
    declarations: [
        InputControlComponent

    ],
    providers: [
    ],
    imports: [
        CommonModule,

    ],
    exports: [
        InputControlComponent
    ]
})
export class SharedModule {
    constructor(
    ) {
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';


[...]

import { SharedModule } from './shared/shared.module';


@NgModule({
    declarations: [
        AppComponent,
        [...]



    ],

    providers: [
        [...]

    ],
    imports: [
        CommonModule,
        [...]
        AdministrationModule,
        SharedModule,
        RouterModule.forRoot([
            { path: 'home', component: HomeComponent },
            { path: '**', component: PageNotFoundComponent },
        ]),



    ]

})
export class AppModuleShared {
    constructor(
    ) {
    }

}

但是找不到我的InputControlComponent。

Answer 1

我对它的划分有些不同。

在app.module级别上，您可以创建“模块”文件夹，在其中将您的主要组件（例如管理模块或配置文件模块）放置在单独的文件中。

如果您有几乎在所有地方都显示的代码块（如页眉或页脚），则可以创建blocks文件夹（与app.module处于同一级别）并将其放在那里。

关于MyButton，我认为创建另一个名为Shared的文件并将其放在其中是一个好主意，这样您就可以轻松地将其导入所需的位置。

所以基本上看起来像

blocks = header-> header.component.ts + footer-> footer.component.ts（以及所有菜单组件）
modules = profile-> profile.component.ts以及与其连接的所有其他文件+ admin-> admin.component.ts，与配置文件
shared = myButton，并在shared.module中声明并导出所有可重复使用的内容

您可以轻松地在要使用按钮组件的所有模块中导入shared.module。

Answer 2

您似乎朝着正确的方向前进，请在本文末尾找到链接并验证您的逻辑。整个逻辑应该是：我们不能仅通过在所有模块中导入该组件就将其共享给不同的模块，因为Angular 2不允许我们将单个组件导入不同的模块，如果尝试这样做，那么Angular会抛出错误：

Type X(component) is part of the declarations of 2 modules

因此，为了解决此问题，我们创建了一个共享模块而不是共享组件，现在我们在所有其他模块中共享此模块，为此，我们使用import语句，并在此组件获取后在所有其他模块中导入共享模块自动共享给所有模块。

您可以在此处找到详细说明：-

https://www.oodlestechnologies.com/blogs/How-to-share-component-to-multiple-modules-in-Angular2

与Angular模块共享组件

共享模块

app.module.ts

2 个答案: