如何創(chuàng)建自定義的AngularSchematics-創(chuàng)新互聯(lián)

這篇文章主要介紹如何創(chuàng)建自定義的Angular Schematics，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、成都網(wǎng)站制作網(wǎng)站策劃，項目實(shí)施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元五華做網(wǎng)站,已為上家服務(wù),為五華各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

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

1. 什么是 Schematics?

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

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

現(xiàn)在，我們也可以自己來創(chuàng)建自定義的 Schematics 。在下面的介紹中，我們將創(chuàng)建一個自定義的 Schematics，實(shí)現(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)容應(yīng)該如下所示。我們在其中定義了多個自定義的選項，在使用這個 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 的邏輯實(shí)現(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)容。當(dāng)你在使用這個 schematics 的時候，classify 將用來獲取 options 中的 name 的值。

my-first-schema.component.html

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

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

這里的 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

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

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

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

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

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

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

你應(yīng)該看到如下的輸出：

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 的影響。

<h2>Hola Service</h2>

以上是“如何創(chuàng)建自定義的Angular Schematics”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：如何創(chuàng)建自定義的AngularSchematics-創(chuàng)新互聯(lián)
鏈接分享：http://muchs.cn/article44/cdcihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、App開發(fā)、移動網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)