如何使用 Angular CLI 生成组件、指令、服务等？

推荐答案

在 Angular 中，使用 Angular CLI 可以快速生成组件、指令、服务等。以下是常用的命令：

生成组件

ng generate component component-name

或简写：

ng g c component-name

生成指令

ng generate directive directive-name

或简写：

ng g d directive-name

生成服务

ng generate service service-name

或简写：

ng g s service-name

生成模块

ng generate module module-name

或简写：

ng g m module-name

生成管道

ng generate pipe pipe-name

或简写：

ng g p pipe-name

生成类

ng generate class class-name

或简写：

ng g cl class-name

生成接口

ng generate interface interface-name

或简写：

ng g i interface-name

生成枚举

ng generate enum enum-name

或简写：

ng g e enum-name

本题详细解读

生成组件

生成组件时，Angular CLI 会自动创建一个新的文件夹，包含组件的 TypeScript 文件、HTML 模板文件、CSS 样式文件和测试文件。例如，生成一个名为 user-profile 的组件：

ng g c user-profile

这将在 src/app/user-profile 目录下生成以下文件：

• user-profile.component.ts
• user-profile.component.html
• user-profile.component.css
• user-profile.component.spec.ts

生成指令

生成指令时，Angular CLI 会创建一个新的指令文件和一个测试文件。例如，生成一个名为 highlight 的指令：

ng g d highlight

这将在 src/app 目录下生成以下文件：

• highlight.directive.ts
• highlight.directive.spec.ts

生成服务

生成服务时，Angular CLI 会创建一个新的服务文件和一个测试文件。例如，生成一个名为 data 的服务：

ng g s data

这将在 src/app 目录下生成以下文件：

• data.service.ts
• data.service.spec.ts

生成模块

生成模块时，Angular CLI 会创建一个新的模块文件。例如，生成一个名为 admin 的模块：

ng g m admin

这将在 src/app/admin 目录下生成以下文件：

• admin.module.ts

生成管道

生成管道时，Angular CLI 会创建一个新的管道文件和一个测试文件。例如，生成一个名为 reverse 的管道：

ng g p reverse

这将在 src/app 目录下生成以下文件：

• reverse.pipe.ts
• reverse.pipe.spec.ts

生成类

生成类时，Angular CLI 会创建一个新的类文件。例如，生成一个名为 user 的类：

ng g cl user

这将在 src/app 目录下生成以下文件：

• user.ts

生成接口

生成接口时，Angular CLI 会创建一个新的接口文件。例如，生成一个名为 product 的接口：

ng g i product

这将在 src/app 目录下生成以下文件：

• product.ts

生成枚举

生成枚举时，Angular CLI 会创建一个新的枚举文件。例如，生成一个名为 status 的枚举：

ng g e status

这将在 src/app 目录下生成以下文件：

• status.ts