0

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

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

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->shared->components.module // 这里是所有组件
app->main.page // 一个页面的模块
app->users.page // 另一个页面的模块
app->main.app.module //根模块

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

import {GenericListComponent} from "@app/components"

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

4

1 回答 1

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/.

于 2016-10-17T12:09:20.507 回答