使用AngularCLISchematics
如果您像我一样，当您开始使用 Angular 工作时（尤其是刚开始使用 Angular 时），您很快就会因必须设置的大量文件和配置而筋疲力尽。 创建一个新组件需要手动创建三个单独的文件，并确保它们正确放置在模块中。 一旦您的项目开始增长，这项任务就开始成为一件苦差事。
Angular Schematics 是 Angular 团队在 2018 年推出的，它提供了一个 API 来生成和管理 Angular 项目中的文件，以及提供任何所需的依赖项。 把它想象成一个模板工具。
在本文中，我将向您展示如何利用内置原理图来简化您的 Angular 开发。
设置
我们需要做的第一件事是安装 Angular CLI。
$ npm install -g @angular/cli@latest
完成后，我们可以通过运行创建一个新项目
$ ng new my-app
您现在有一个项目，并希望开始使用以下内容填充它：组件、服务、指令、守卫等。 这些实体中的每一个都可以使用原理图生成。 将此原理图的名称作为参数传递给：
$ ng generate
组件示意图
要生成一个名为 DashboardComponent 的组件，我们使用 component 原理图：
$ ng generate component dashboard CREATE src/app/dashboard/dashboard.component.scss (0 bytes) CREATE src/app/dashboard/dashboard.component.html (24 bytes) CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes) CREATE src/app/dashboard/dashboard.component.ts (282 bytes) UPDATE src/app/app.module.ts (487 bytes)
您会注意到 CLI 创建了四个单独的文件（样式表、HTML 模板、测试规范和 TypeScript 文档）并且还更新了模块。 我们可以通过检查 app.module.ts 来验证它是否被添加：
app.module.ts
import { DashboardComponent } from './dashboard/dashboard.component';
...
@NgModule({
declarations: [
DashboardComponent
],
...
CLI 还将构造组件，以便模型具有 PascalCase 名称，并且目录将是 kebob-case。
所以以下输入：
$ ng generate dashboard-settings
和
$ ng generate DashboardSettings
将产生相同的结果。
服务示意图
我们可以使用 service 原理图创建一个名为 SocketService 的服务：
$ ng generate service socket CREATE src/app/services/socket.service.spec.ts (333 bytes) CREATE src/app/services/socket.service.ts (135 bytes)
默认情况下，这不会为服务生成新目录，而是会在当前路径下生成服务和测试文件。 您可以通过设置 --flat false 来改变它：
$ ng generate service socket --flat false CREATE src/app/services/socket/socket.service.spec.ts (333 bytes) CREATE src/app/services/socket/socket.service.ts (135 bytes)
另请注意，这不会自动将服务添加到您的 NgModule 中，因此您需要自己添加它。
守卫示意图
保护原理图将询问您要实现的接口类型：CanActivate、CanActivateChild 或 CanLoad。 使用 --implements 参数直接传递它或以交互方式输入它。
要生成一个名为 AuthGuard 并实现 CanActivate 的守卫，请输入：
$ ng generate guard auth --implements CanActivate CREATE src/app/auth.guard.spec.ts (346 bytes) CREATE src/app/auth.guard.ts (456 bytes)
打开生成的文件会显示它实现了 CanActivate 接口。
管道示意图
管道原理图会在当前目录生成一个管道并将其添加到主模块中。 您还可以使用 --module 参数指定模块。 您还可以选择指定应导出管道。
要生成将被导出的名为 PhonePipe 的管道，请调用以下命令：
$ ng generate pipe phone --export CREATE src/app/phone.pipe.spec.ts (183 bytes) CREATE src/app/phone.pipe.ts (203 bytes) UPDATE src/app/app.module.ts (696 bytes)
打开 app.module.ts 显示 PhonePipe 已添加到模块中。
app.module.ts
import { PhonePipe } from './phone.pipe';
...
@NgModule({
declarations: [
PhonePipe
],
...
exports: [PhonePipe]
...
指令示意图
指令示意图将生成一个 Angular 指令。 默认情况下，该指令将被添加到模块中。
要生成名为 SamplingDirective 的新指令，请调用：
$ ng generate pipe sampling CREATE src/app/sampling.directive.spec.ts (236 bytes) CREATE src/app/sampling.directive.ts (147 bytes) UPDATE src/app/app.module.ts (781 bytes)
原理图将使用与 Angular 项目相同的前缀来命名指令。 例如，如果您的项目的默认前缀设置为“app”，则该指令应命名为 [appSampling]。 您可以通过将 --prefix 参数传递到 CLI 来手动设置它。
向前进
这些只是 Angular CLI 提供的几个示意图。 您可以通过键入列出所有可用的原理图
$ ng generate --help
此外，您还可以通过在ng generate [schematic]之后传入--help来获取每个原理图的详细信息
Angular 示意图是帮助简化 Angular 开发的绝佳工具。
快乐编码！
