Angular - 共享模块

本 Angular 教程章节将介绍 Shared Module，包括如何创建它、如何使用它，以及它的优缺点。

Angular 中的 Shared Module

在 Angular 中，Shared Module 是开发者根据应用程序需求设计或创建的自定义模块。Shared module 允许开发者在整个应用程序中访问其 components、directives、pipes 等。

一个 Module 本身并不是 shared module，只有在正确导出并导入到需要其 components 的其他模块中时，它才成为 shared module。

创建 Shared Module

创建 shared module 可以帮助您组织和简化代码，减少在同一应用程序中重复相同内容的冗余。

使用以下命令在您的 Angular 应用程序中创建一个 module，此 module 将在应用程序中用作 shared module。我们在需要其 components 的其他 module 中导入并导出此 module。

步骤 1： 打开项目

在任意代码编辑器（如 VS Code）中打开您的应用程序。

步骤 2： 导航到应用程序目录

打开代码编辑器的终端，并导航到您的应用程序目录，如下所示：

cd your_application_directory

e.g.
cd myapp

步骤 3： 创建一个名为 Shared 的新 module（即视为 shared module），如下所示：

ng generate module shared

执行上述命令后，您应该能够看到 shared 文件夹。在此文件夹中，将有一个名为 shared.module.ts 的文件，包含默认代码：

shared.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如何使用 Shared Module？

要在我们的 Angular 应用中使用 Shared Module，第一步是将它导入到我们的根模块中，在我们的应用中根模块名为 AppModule。

步骤 1： 打开 app.module.ts 文件，并按以下方式导入 shared module：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, 
    SharedModule
  ],
  providers: [
    provideClientHydration()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我们已经在 Angular 应用中创建了一个 shared module 并将其导入到 AppModule（即根模块）中。现在，让我们在 Shared Module 中创建两个组件，以便在整个应用中使用。

步骤 2： 创建 Header Component

在 shared module 中创建一个新的 Header 组件，如下所示：

ng generate component shared/header

步骤 3： 打开 header.html 文件并放置以下代码：

header.html

<h2>This his Header</h2>
<p>A component from Shared Module</p>

步骤 4：创建另一个组件 Footer。

在 shared module 中再创建一个 Footer 组件，如下所示：

ng generate component shared/footer

步骤 5： 打开 footer.html 文件并放置以下代码：

footer.html

<h2>This his Footer</h2>
<p>A component from Shared Module</p>

步骤 6： 更新 Shared Module

要在该模块外部使用 Shared Module 的“components”，需要在 shared.module.ts 文件中导出 Header 和 Footer 组件，如下所示：

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Header } from './header/header';
import { Footer} from './footer/footer';

@NgModule({
  declarations: [
    Header,
    Footer
  ],
  imports: [
    CommonModule
  ],
  exports: [Header, Footer]
})
export class SharedModule { }

步骤 7： 更新 App Component

打开 app.html 并放置以下代码：

app.html

<app-header></app-header>
<hr>
<p>This is the loaded area</p>
<hr>
<app-footer></app-footer>

步骤 8： 使用以下命令运行应用：

ng serve

步骤 9： 打开你的友好浏览器（Chrome）并导航到 localhost:4200：

Shared Module 的优势

以下是 Shared Modules 的优势列表：

• 通过使用“reusable” components、directives 等来提升应用性能。
• 组织应用，简化代码。
• 提高应用的 modularity。
• 减少 redundancy。

结论

总之，观察上述输出结果，你应该能够完全理解 Shared Modules 的工作原理。通过共享这个模块，我们可以在整个应用中重复使用其“components”、“directives”和“pipes”，而无需在同一应用中多次创建它们。