在前端开发中，使用 Angular 进行项目开发是一种非常流行的方式。在 Angular 开发中，生成组件是非常常见的操作，而 ng-codegen 这个 npm 包，就可以帮助我们自动化生成 Angular 组件，提高我们的开发效率。本文将介绍 ng-codegen 的使用方法，并提供详细的说明和示例代码。
什么是 ng-codegen
ng-codegen 是一个 npm 包，它可以帮助我们自动化生成 Angular 组件。使用 ng-codegen，我们可以通过简单的命令行操作，生成出符合规范的 Angular 组件，包括：
- Component：组件
- Directive：指令
- Pipe：管道
除此之外，ng-codegen 还提供了一些其他命令，让我们可以方便地修改和扩展生成的组件。
如何使用 ng-codegen
安装
首先，我们需要通过 npm 安装 ng-codegen：
npm i ng-codegen -g
安装完成后，我们就可以使用 ngc 命令来对我们的 Angular 项目进行代码生成了。
生成组件
生成一个 Component 的命令如下：
ngc component <ComponentName>
比如，我们要生成一个名叫 MyComponent 的组件，我们可以执行以下命令：
ngc component MyComponent
执行上述命令后，ng-codegen 会在项目的 src/app 目录下自动生成 MyComponent 组件的代码。
生成 Directive
生成一个 Directive 的命令如下：
ngc directive <DirectiveName>
比如，我们要生成一个名叫 MyDirective 的指令，我们可以执行以下命令：
ngc directive MyDirective
执行上述命令后，ng-codegen 会在项目的 src/app 目录下自动生成 MyDirective 指令的代码。
生成 Pipe
生成一个 Pipe 的命令如下：
ngc pipe <PipeName>
比如，我们要生成一个名叫 MyPipe 的管道，我们可以执行以下命令：
ngc pipe MyPipe
执行上述命令后，ng-codegen 会在项目的 src/app 目录下自动生成 MyPipe 管道的代码。
其他命令
除了上述的生成组件、指令和管道的命令之外，ng-codegen 还提供了其他一些命令，让我们可以方便地修改和扩展生成的组件。
修改组件
生成出来的组件代码可能会不符合我们的需求。我们可以使用以下命令来修改组件：
ngc component <ComponentName> --edit
编辑器会打开自动生成的组件代码，我们可以在里面对组件进行修改。
扩展组件
我们可以使用以下命令来扩展组件：
ngc component <ComponentName> --generate <FunctionName>
比如，我们要在 MyComponent 组件中添加一个名为 MyFunction 的函数，我们可以执行以下命令：
ngc component MyComponent --generate MyFunction
ng-codegen 会自动为我们在 MyComponent 组件中生成一个 MyFunction 函数。
示例代码
下面是一段使用 ng-codegen 生成组件的示例代码：
ngc component HelloWorld --selector app-hello-world --path app/home
这个命令的作用是：在 app/home 目录下生成一个名为 HelloWorld 的组件，选择器为 app-hello-world。
执行完成后，我们可以在 app/home 目录下看到生成的 HelloWorld 组件的代码，其中包括了各种生命周期函数、样式文件和 HTML 文件。我们可以直接在这些文件中进行修改，快速实现组件开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de1c6