导入和导出核心模块和共享模块 [英] Import and Export Core Module and Shared Module

问题描述

我在确定我应该在核心模块和共享模块中导入"和导出"哪些内容时遇到困难.例如，在我的共享模块中，我导入和导出CommonModule，而仅导出ReactiveFormsModule.在我的核心模块中，我仅导入模块并导出组件.我想知道在核心模块和共享模块中应该导入"和导出"什么?我在这里阅读了stackoverflow和文档中的其他示例，但我仍然感到困惑.请在下面检查我的结构/代码.谢谢.

I'm having a difficulty in determining on what should i "import" and "export" in my core modules and shared modules. For instance, in my shared module, i imported and exported CommonModule while only exported the ReactiveFormsModule. In my core module, i imported modules and exported components only. I'm wondering what should i "import" and "export" in core and shared module? I've read other examples here in stackoverflow and the docs and I'm still confuse. Please check my structure/codes below. Thanks.

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { ToggleFullscreenDirective } from './directives/toggle-fullscreen.directive';
import { ViewComponent } from './view/view.component';
import { ErrorsComponent } from './reusable-error-page/errors.component';

@NgModule({
  exports: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent,
    CommonModule,
    ReactiveFormsModule
  ],
  imports: [
    CommonModule
  ],
  declarations: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent
  ]
})
export class SharedModule { }

核心模块

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HttpRequestInterceptor } from './http-request.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AuthModule } from '@app/auth/auth.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { ReactiveFormsModule } from '@angular/forms';
import { ContentLayoutComponent } from '../layouts/content/content-layout.component';
import { FullLayoutComponent } from '../layouts/full/full-layout.component';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
import { ErrorPageComponent } from '../error-page/error-page.component';

// NGXS
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
import { NGXS_PLUGINS } from '@ngxs/store';
import { logoutPlugin } from '@app/auth/plugins/logout.plugin';

@NgModule({
  declarations: [
    NavbarComponent,
    SidebarComponent,
    FooterComponent,
    FullLayoutComponent,
    ContentLayoutComponent,
    PageNotFoundComponent,
    ErrorPageComponent
  ],

  imports: [
    AuthModule,
    BrowserAnimationsModule,
    HttpClientModule,
    CommonModule,
    ReactiveFormsModule,
    NgSelectModule,
    RouterModule,
    NgbModule,
    NgxsReduxDevtoolsPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot(),
    NgxsModule.forRoot(),
    NgxsStoragePluginModule.forRoot(),
    NgxsRouterPluginModule.forRoot()
  ],

  exports: [
    NavbarComponent,
    SidebarComponent,
    FooterComponent,
    FullLayoutComponent,
    ContentLayoutComponent,
    PageNotFoundComponent,
    ErrorPageComponent
  ],

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
    {
      provide: NGXS_PLUGINS,
      useValue: logoutPlugin,
      multi: true
    }
  ]

})
export class CoreModule { }

应用模块

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '@env/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    CoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐答案

每个模块(共享，核心等)都有特定的用途.

There is a specific purpose of each module (Shared, Core etc..).

所以问题是我应该在Shared Module中导入什么软件包，而在Core Module中导入什么软件包.

So the question is what package should I import in Shared Module and what in the Core Module.

因此，假设一个应用程序具有以下模块:

1. 应用程序模块
2. 核心模块
3. 共享模块
4. 用户模块(This is called feature module)
5. 管理模块(This is called feature module)

1. App Module
2. Core Module
3. Shared Module
4. User Module (This is called feature module)
5. Admin Module (This is called feature module)

让我们对其进行描述:

1. 应用程序模块

在此模块中，我们必须导入将在整个系统中使用的模块/软件包.例如:CommonModule, FormsModule, HttpClientModule等.我们不需要导出这些模块，因为一旦将其导入到App Module中，它将在整个应用程序中可用.

In this module, we have to import the modules/packages which we will use throughout our system. Like: CommonModule, FormsModule, HttpClientModule etc. And we don't need to export these modules as it will be available in whole application once it is imported in App Module.

1. 核心模块

在此模块中，我们必须制作将在系统的几乎每个页面中使用的组件.像:HeaderComponent，FooterCompoennt，AuthGaurds等.这些组件应该导出，以便可以在其他模块中使用.

In this module, we have to make components which will be used in almost every page of the system. Like: HeaderComponent, FooterCompoennt, AuthGaurds etc. And these components should be exported so that it will be available in other modules.

1. 共享模块

在此模块中，我们必须制作Services, Components, Pipes, and Directives，它将在多个组件中使用.像:AlertDialogBox，HTTPService等

In this module, we have to make the Services, Components, Pipes, and Directives which will be used in more than one component. Like: AlertDialogBox, HTTPService, etc.

1. 用户模块

这是一个特色模块.它将具有特定于用户模块的组件.在这里，我们可以导入共享模块，以便可以使用AlertDialogBox以及全部.

This is a featured module. It will have the components specific to a User Module. Here we can import Shared Module so that we can use AlertDialogBox and all.

1. 管理模块

这是一个特色模块.它将具有特定于用户模块的组件.在这里，我们可以导入共享模块，以便我们可以使用AlertDialogBox和全部.

This is a featured module. It will have the components specific to a User Module. Here we can import Shared Module so that we can use AlertDialogBox and all.

这篇关于导入和导出核心模块和共享模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！