使用模块 Angular 8 生成组件 - Javascript

在 Angular 8 中，我们可以使用模块来生成组件。这种方式可以让我们更加方便地组织我们的项目，并且使得我们的组件更加可复用和易维护。

如何使用模块来生成组件

我们可以使用 Angular CLI 来生成一个新的组件模块。如下所示：

ng generate module my-module

这个命令将在 src/app 目录下创建一个名为 my-module 的新模块，并且会为该模块生成一个名为 my-module.module.ts 的 TypeScript 文件。

接下来，我们可以使用 ng generate component 命令来创建组件。如下所示：

ng generate component my-module/my-component

这个命令会在 src/app/my-module 目录下创建一个名为 my-component 的新组件，并且会为该组件生成一个名为 my-component.component.ts 的 TypeScript 文件。

在我们的模块中使用组件

要在我们的模块中使用组件，我们需要先将组件在模块中导入。这可以通过在 my-module.module.ts 文件中使用 import 语句来实现，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponentComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [MyComponentComponent],
  imports: [
    CommonModule
  ],
  exports: [MyComponentComponent]
})
export class MyModuleModule { }

这个模块中有两个重要的部分：declarations 和 exports 数组。

declarations 数组包含了由该模块声明的所有组件、指令和管道。在这里，我们将 MyComponentComponent 添加到了这个数组中。

exports 数组则包含了由该模块导出的组件、指令和管道。在这里，我们可以将 MyComponentComponent 添加到这个数组中，以便其他模块可以使用该组件。

在其他组件中使用我们的组件

要在其他组件中使用我们在模块中导出的组件，我们可以使用 app-my-component 标签来引用该组件，如下所示：

<app-my-component></app-my-component>

这样我们就可以在其他组件中使用 MyComponentComponent 了。

总结

在 Angular 8 中使用模块来生成组件非常方便。我们可以使用 Angular CLI 来生成模块和组件。在我们的模块中，我们需要将组件声明和导出。在其他组件中，我们可以使用 app-my-component 标签来引用我们的组件。