时间戳

首页 > 解决方案 > 为什么每次都需要导入 Angular 2+ 模块或组件而不是一次？

angular - 为什么每次都需要导入 Angular 2+ 模块或组件而不是一次？

问题描述

我是 Angular 和学习的新手，我正在检查我公司的 Angular 应用程序。我注意到他们在 app.module 中导入了一些模块，在 SharedModule 中，导入了另一个模块、组件和服务，这里是 app.module 的代码片段：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { StoreModule } from "@ngrx/store";
import { MatDialogModule } from "@angular/material";
import { AppRoutingModule } from "./app-routing.module";
import { SharedModule } from "@shared/shared.module";

在这里，SharedModule 的代码片段：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatInputModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatSelectModule,
  MatSnackBarModule,
  MatTooltipModule,
} from "@angular/material";
import { RouterModule } from "@angular/router";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { FlexLayoutModule } from "@angular/flex-layout";

import { MatNativeDateModule } from "@angular/material/core";

// Pipes
import { PhonePipe } from "../common/pipes/phone.pipe";
import { DatesFormatPipe } from "app/pipes/dates-format.pipe";

// Services
import { AuthService } from "./services/auth.service";
import { CustomerDataService } from "./services/customer-data.service";
import { TimeEntriesService } from "./services/time-entries.service";
import { ContactsService } from "./services/contacts.service";
import { CaregiversService } from "./services/caregivers.service";
import { ReportService } from "./services/report.service";
import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
import { ReportGuardService } from "./services/auth-guard.service";

// Components
import { LayoutMenuCardsComponent } from "./components/layout-menu-cards/layout-menu-cards.component";
import { TimeEntriesSupportComponent } from "./components/time-entries-support/time-entries-support.component";
import { SpinnerComponent } from "./components/spinner/spinner.component";
import { ContactsSupportComponent } from "./components/contacts-support/contacts-support.component";

@NgModule({
  declarations: [
    ParagraphComponent,
    FormButtonsComponent,
    FormListComponent,
    etc.
  ],
  imports: [
    MatRadioModule,
    MatNativeDateModule,
    FlexLayoutModule,
    CommonModule,
    etc.
  ],
  exports: [
    ParagraphComponent,
    FormButtonsComponent,
    FormListComponent,
    etc.
  ],
  entryComponents: [AddEditContactComponent, AddEditCaregiverComponent],
})
export class SharedModule {}

但是，在作为应用程序一部分的不同组件中，我注意到它们再次导入了许多以前导入的模块和组件。

  1. 为什么必须这样做，而不是只在 app.module 或其他模块中导入一次模块和组件，然后在任何需要的地方使用它们？

  2. 难道不应该在模块中使用exports属性导出时，它们是可见的或公开的吗？

  3. 如果由于 Angular 要求必须以这种方式完成，为什么不将它们导入到需要而不是 app.module 的地方？

谢谢

标签： angular

解决方案

Angular 中的模块化架构是根据范围和问题域安装特定的代码彼此分离的行为。

问题域是对解决特定问题所需内容的定义。它是您工作的范围，是围绕什么相关和什么不相关的清晰界限。正是它为我们提供了 A 点和 B 点——生成的软件是这两点之间的连接线。

阅读更多：Angular 中的模块化架构意味着什么？

推荐阅读