Question

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

共享模块

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 { }

Answer 1

对于组件##

如果要在多个模块中使用组件，则可以在SharedModule中对其进行定义，然后声明并导出。

对于模块

您可以（但不需要）从CommonModule, FormsModule etc.导出角度模块FeatureModule。如果您将此FeatureModule导入到任何OtherModule中，则所有导出的模块将自动导入到OtherModule中。

您始终可以在每个模块中分别导入角度模块。但是，如果您在其他功能模块中使用类似的模块，我建议将所有模块导入共享模块，并在其他地方使用。

Answer 2

每个模块（共享，核心等）都有特定的用途。

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

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

应用程序模块
核心模块
共享模块
用户模块(This is called feature module)
管理模块(This is called feature module)

让我们对其进行描述：

应用程序模块

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

核心模块

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

共享模块

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

用户模块

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

管理模块

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

导入和导出核心模块和共享模块

2 个答案:

对于组件##

对于模块