Question

我的应用程序中有一个共享模块，我将所有组件捆绑在一起单个模块中的共享文件夹。

我现在需要的是如何从该模块导入类？

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ModuleWithProviders } from '@angular/core';

import { MaterialModule } from '@angular/material';
import { AgGridModule } from 'ag-grid-ng2/main';

import { TreeModule } from 'angular2-tree-component';

import {
    GenericTabsComponent, DateNavigatorComponent,
    ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent,
    GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent,
    UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent,
    WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent,
    ActionGridComponent, ComboBoxComponent, TextareaComponent
} from './index';

@NgModule({
    id: "@app/components",
    imports: [BrowserModule, FormsModule, ReactiveFormsModule, MaterialModule, AgGridModule, TreeModule],
    exports: [FormsModule, ReactiveFormsModule, GenericTabsComponent, DateNavigatorComponent,
        ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent,
        GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent,
        UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent,
        WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent,
        ActionGridComponent, ComboBoxComponent, TextareaComponent],
    declarations: [GenericTabsComponent, DateNavigatorComponent,
        ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent,
        GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent,
        UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent,
        WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent,
        ActionGridComponent, ComboBoxComponent, TextareaComponent],
})
export class ComponentsModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: ComponentsModule,
            providers: []
        };
    }
}

这是共享文件夹，应用程序结构如下所示。

app-＆gt; shared-＆gt; components.module //这里是所有组件
  app-＆gt; main.page //用于页面的模块
app-＆gt; users.page //一个模块   另一页面的应用程序 - > main.app.module //根模块

现在在main.page我需要从共享模块导入一个组件类，例如GenericListComponent，以创建ViewChild并指定类型。从哪里导入课程GenericListComponent？从文件位置，或导入将看起来像这样？

import {GenericListComponent} from "@app/components"

此外，如果我有2个带有子项的页面模块，并且它们使用来自共享的组件。我在哪里将共享模块放在主应用程序组件中，还是在每个模块中将其指定为导入？

Answer 1

您需要从文件位置导入组件，但有一点是您可以使用ES2015导出功能。

想象一下，在您的GenericListComponent文件夹中创建一个index.ts，并使用：

export * from './generic-list.component';

这基本上会重新导出generic-list.component

上导出的所有内容

现在，在shared/文件夹中，我们再创建一个index.ts来重新导出所有内容：

export * from './generic-list';

如果您发现我们只引用generic-list/文件夹，因为其中包含index.ts。

所以，现在你的main.page就可以了：

import { GenericListComponent } from './shared'

现在，您只需对shared/文件夹中的每个文件夹重复此过程，并在index.ts内的shared/添加多行。

如何在项目中使用ng2Modules

1 个答案: