本文对 Angular Schematics 进行了介绍，并创建了一个用于创建自定义 Component 的 Schematics ，然后在 Angular 项目中以它为模板演练了通过 Schematics 添加自定义的 Component 。
1. 什么是 Schematics?
简单来说，Schematics 是一个项目处理工具，可以帮助我们对 Angular 项目中的内容进行成批的处理。
比如我们在是使用 Angular CLI 的时候，可能使用过诸如 ng g c myComponent 之类的命令来帮助我们创建一个新 Component ，这个命令将各种工作成批完成，添加 Component 代码文件、模板文件、样式文件、添加到 Module 中等等。
现在，我们也可以自己来创建自定义的 Schematics 。在下面的介绍中，我们将创建一个自定义的 Schematics，实现这个类似的功能，我们还提供了命令选项的支持。
对于 Schematics 的介绍，请参考：Schematics — An Introduction
2. 演练创建 Schematics
首先您需要安装 Schematics 的命令行工具。
npm install -g @angular-devkit/schematics-cli
然后，就可以使用这个工具来创建您的第一个 Schematics 了，我们将它命名为 my-first-schema。
schematics blank --name=my-first-schema
这会创建名为 my-frist-schema 的文件夹，在其中已经创建了多个文件，如下所示。
我们使用 blank 为我们后继的工作打好基础。
然后，我们定义自己的 Schematics 。
需要将 src 文件夹中的 collection.json 修改成如下内容：
{ "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", "schematics": { "my-first-schema": { "aliases": ["mfs"], "factory": "./my-first-schema", "description": "my first schematic.", "schema": "./my-first-schema/schema.json" } } }
$schema => 定义该 collection 架构的 url 地址.
schematics => 这是你的 schematics 定义.
my-first-schema => 以后使用这个 schematics 的 cli 名称.
aliases => 别名.
factory => 定义代码.
Description => 简单的说明.
Schema => 你的 schema 的设置. 这个文件的内容应该如下所示。我们在其中定义了多个自定义的选项，在使用这个 Schematics 的时候，可以通过这些选项来设置生成的内容。
{ "$schema": "http://json-schema.org/schema", "id": "my-first-schema", "title": "my1er Schema", "type": "object", "properties": { "name": { "type": "string", "default": "name" }, "path": { "type": "string", "default": "app" }, "appRoot": { "type": "string" }, "sourceDir": { "type": "string", "default": "src/app" }, "service": { "type": "boolean", "default": false, "description": "Flag to indicate whether service should be generated.", "alias": "vgs" } } }
这里可以设置你的 schematics 的命令选项，类似于在使用 g 来创建一个新的组件的时候，您可以使用一个 --change-detection 的选项。
ng g c component-name --change-detection
您还需要为您的选项创建一个接口 schema.ts。
export interface schemaOptions { name: string; appRoot: string; path: string; sourceDir: string; service: boolean; }
下面才是我们的核心内容 index.ts 。这里定义我们 schematics 的逻辑实现。
import { chain, mergeWith } from '@angular-devkit/schematics'; import { apply, filter, move, Rule, template, url, branchAndMerge } from '@angular-devkit/schematics'; import { normalize } from '@angular-devkit/core'; import { dasherize, classify} from "@angular-devkit/core/src/utils/strings"; import { schemaOptions } from './schema'; const stringUtils = {dasherize, classify}; function filterTemplates(options: schemaOptions): Rule { if (!options.service) { return filter(path => !path.match(/\.service\.ts$/) && !path.match(/-item\.ts$/) && !path.match(/\.bak$/)); } return filter(path => !path.match(/\.bak$/)); } export default function (options: schemaOptions): Rule { // TODO: Validate options and throw SchematicsException if validation fails options.path = options.path ? normalize(options.path) : options.path; const templateSource = apply(url('./files'), [ filterTemplates(options), template({ ...stringUtils, ...options }), move('src/app/my-schema') ]); return chain([ branchAndMerge(chain([ mergeWith(templateSource) ])), ]); }
Classify is for a little magic in the templates for the schematics.
filterTemplates is a filter for use or add more files.
option.path it's very important you use this option for create the folders and files in the angular app.
templateSource use the cli options and “build” the files into “./files” for create you final template (with the cli options changes)
在 my-first-schema 文件夹中，创建名为 files 的文件夹，添加三个文件：