详解创建自定义的Angular Schematics

npm install -g @angular-devkit/schematics-cli

schematics blank --name=my-first-schema

{
 "$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": "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"
  }
 }
}

ng g c component-name --change-detection

export interface schemaOptions {
 name: string;
 appRoot: string;
 path: string;
 sourceDir: string;
 service: boolean;
}

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 "external nofollow" target="_blank" href="https://github.com/jorgeucano/my-first-schematics-es/blob/master/my-first-schema/src/my-first-schema/files/my-first-schema.component.ts">my-first-schema.component.ts



import { Component, Input, } from '@angular/core';

@Component({
 selector: 'my-first-schema-component',
 templateUrl: './my-first-schema.component.html',
 styleUrls: [ './my-first-schema.component.css' ]
})

export class MyFirstSchemaComponent {

 constructor(){
 console.log( '<%= classify(name) %>' );
 }

}


这是一个模板文件，其中可以看到 <%= classify(name) %> 的内容。当你在使用这个 schematics 的时候，classify 将用来获取 options 中的 name 的值。
my-first-schema.component.html


<% if (service) { %>
 <h1>Hola Service</h1>
<% } %>

<% if (!service) { %>
 <h1>Hola no Service</h1>
<% } %>



这里的 service 同样来自 options，我们定义了一个 Boolean 类型的选项。
my-first-schema.component.css，这个文件目前保持为空即可。
回到控制台，在你的项目文件夹中执行 build 命令：npm run build
 定义已经完成。
3. 在 Angular 项目中使用这个 Schematics
下面，我们在其它文件夹中，创建一个新的 Angular 项目，以便使用刚刚创建的这个 Schematics。


ng new test-schematics


进入到这个项目中，使用我们新创建的 schematics。
在其 node-modules 文件夹中创建名为 mfs 的模块文件夹，我们还没有将新创建的 Schematics 上传到 Npm 中，这里我们手工将其复制到新建的 Angular 项目中。
将您前面创建的 schematics 项目中所有的文件（除了 node_modules 文件夹和 package-lock.json 文件之外），复制到这个 mfs 文件夹中，以便使用。
现在，我们可以使用前面创建的这个 schematics 了。


ng g my-first-schema mfs"Mfs" --collection mfs

  create src/app/my-schema/my-first-schema.component.css (0 bytes)

  create src/app/my-schema/my-first-schema.component.html (33 bytes)

  create src/app/my-schema/my-first-schema.component.ts (320 bytes)

PS test-schematics>


在刚才新建的 Angular 项目 src/app 文件夹中，已经新建了一个名为 my-first-schema 的文件夹，其中包含了三个文件。
打开 my-first-schema.component.ts 文件，可以看到替换之后的内容


import { Component, Input, } from '@angular/core';

@Component({
 selector: 'my-first-schema-component',
 templateUrl: './my-first-schema.component.html',
 styleUrls: [ './my-first-schema.component.css' ]
})

export class MyFirstSchemaComponent {

 constructor(){
 console.log( 'Mfs' );
 }

}



而在 my-first-schema.component.html 中，可以看到 --service 的影响。


<h1>Hola Service</h1>



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。