本文對 Angular Schematics 進行了介紹，并創(chuàng)建了一個用于創(chuàng)建自定義 Component 的 Schematics ，然后在 Angular 項目中以它為模板演練了通過 Schematics 添加自定義的 Component 。

1. 什么是 Schematics?

 簡單來說，Schematics 是一個項目處理工具，可以幫助我們對 Angular 項目中的內(nèi)容進行成批的處理。

比如我們在是使用 Angular CLI 的時候，可能使用過諸如 ng g c myComponent 之類的命令來幫助我們創(chuàng)建一個新 Component ，這個命令將各種工作成批完成，添加 Component 代碼文件、模板文件、樣式文件、添加到 Module 中等等。

現(xiàn)在，我們也可以自己來創(chuàng)建自定義的 Schematics 。在下面的介紹中，我們將創(chuàng)建一個自定義的 Schematics，實現(xiàn)這個類似的功能，我們還提供了命令選項的支持。

對于 Schematics 的介紹，請參考：Schematics — An Introduction

2. 演練創(chuàng)建 Schematics

首先您需要安裝  Schematics 的命令行工具。

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

然后，就可以使用這個工具來創(chuàng)建您的第一個 Schematics 了，我們將它命名為 my-first-schema。

schematics blank --name=my-first-schema

這會創(chuàng)建名為 my-frist-schema 的文件夾，在其中已經(jīng)創(chuàng)建了多個文件，如下所示。

我們使用 blank 為我們后繼的工作打好基礎(chǔ)。

 然后，我們定義自己的 Schematics 。

需要將 src 文件夾中的 collection.json 修改成如下內(nèi)容：

{
 "$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 架構(gòu)的 url 地址.

schematics => 這是你的  schematics 定義.

my-first-schema => 以后使用這個  schematics 的 cli 名稱.

aliases => 別名.

factory => 定義代碼.

Description => 簡單的說明.

Schema => 你的 schema 的設(shè)置. 這個文件的內(nèi)容應該如下所示。我們在其中定義了多個自定義的選項，在使用這個 Schematics 的時候，可以通過這些選項來設(shè)置生成的內(nèi)容。

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

這里可以設(shè)置你的 schematics 的命令選項，類似于在使用 g 來創(chuàng)建一個新的組件的時候，您可以使用一個 --change-detection 的選項。

ng g c component-name --change-detection

您還需要為您的選項創(chuàng)建一個接口 schema.ts。

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

下面才是我們的核心內(nèi)容 index.ts 。這里定義我們 schematics 的邏輯實現(xiàn)。

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 文件夾中，創(chuàng)建名為 files 的文件夾，添加三個文件：

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) %> 的內(nèi)容。當你在使用這個 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，這個文件目前保持為空即可。

回到控制臺，在你的項目文件夾中執(zhí)行 build 命令：npm run build

 定義已經(jīng)完成。

3. 在 Angular 項目中使用這個 Schematics

下面，我們在其它文件夾中，創(chuàng)建一個新的 Angular 項目，以便使用剛剛創(chuàng)建的這個 Schematics。

ng new test-schematics

進入到這個項目中，使用我們新創(chuàng)建的 schematics。

在其 node-modules 文件夾中創(chuàng)建名為 mfs 的模塊文件夾，我們還沒有將新創(chuàng)建的 Schematics 上傳到 Npm 中，這里我們手工將其復制到新建的 Angular 項目中。

將您前面創(chuàng)建的 schematics 項目中所有的文件（除了 node_modules 文件夾和 package-lock.json 文件之外），復制到這個 mfs 文件夾中，以便使用。

現(xiàn)在，我們可以使用前面創(chuàng)建的這個 schematics 了。

ng g my-first-schema mfs  — service  — name=”Mfs”  — collection mfs

這里設(shè)置了 name 和 service 的值。

你應該看到如下的輸出：

PS test-schematics> ng g my-first-schema mfs --service --name="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 文件夾中，已經(jīng)新建了一個名為 my-first-schema 的文件夾，其中包含了三個文件。

打開 my-first-schema.component.ts 文件，可以看到替換之后的內(nèi)容

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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論