4

在这篇文章之后，我一直在创建自定义 Angular Schematics：https ://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4

现在我正在尝试找出如何修改一些文件（例如 app-routing.module.ts，以添加通过我的自定义原理图创建的组件的路由）。可能吗？谁能提供一个例子？

我也想同时在不同的位置/文件夹中创建文件。

这是我的自定义原理图的当前结构：

  • 源代码
    • 桌子
      • 文件
        • __name@dasherize __-table
          • __name@dasherize __-table-routing.module.ts
          • __name@dasherize __-table.component.html
          • __name@dasherize __-table.component.scss
          • ...
        • 索引.ts
        • 架构.d.ts
        • 模式.json
    • 集合.json
  • ...

这是我当前的代码：

索引.ts

import { strings } from '@angular-devkit/core';
import {
    apply, mergeWith, move, Rule, SchematicContext, SchematicsException, template, Tree, url
} from '@angular-devkit/schematics';
import { parseName } from '@schematics/angular/utility/parse-name';
import { buildDefaultPath } from '@schematics/angular/utility/project';

import { Schema } from './schema';

export function tabla(_options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const workspaceConfigBuffer = tree.read('angular.json');

    if (!workspaceConfigBuffer) {
      throw new SchematicsException('Not an Angular CLI workspace');
    }

    const workspaceConfig = JSON.parse(workspaceConfigBuffer.toString());
    const projectName = _options.project || workspaceConfig.defaultProject;
    const project = workspaceConfig.projects[projectName];
    const defaultProjectPath = buildDefaultPath(project);
    const parsedPath = parseName(defaultProjectPath, _options.name);
    const { name, path } = parsedPath;
    const sourceTemplate = url('./files');

    const sourceParametrizedTemplate = apply(sourceTemplate, [
      template({
        ..._options,
        ...strings,
        name
      }),
      move(path)
    ]);

    return mergeWith(sourceParametrizedTemplate)(tree, _context);
  };
}

模式.json

{
    "$schema": "http://json-schema.org/schema",
    "id": "SchematicsTable",
    "title": "Options Table Schema",
    "type": "object",
    "description": "Creates a page with a table",
    "properties": {
        "project": {
            "type": "string",
            "description": "Generates in a specific project"
        },
        "name": {
            "type": "string",
            "description": "Component's name",
            "$default": {
                "$source": "argv",
                "index": 0
            }
        }
    },
    "required": [
        "name"
    ]
}

架构.d.ts

export interface Schema {
    project?: string;
    name: string;
}

集合.json

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "table": {
      "description": "Page with a table",
      "factory": "./table/index#table",
      "schema": "./table/schema.json"
    }
  }
}

现在，如果我在 Angular CLI 工作区中执行“ng g my_package_name:table --name=example”，则会在“src/app”内创建一个文件夹“example-table”，其中包含以下文件：

  • 示例表路由.module.ts
  • 示例-table.component.html
  • 示例-table.component.scss
  • ...

这已经很好了，但我想要的是在创建此文件夹和文件的同时，修改“app-routing.module.ts”文件添加示例表页面的路由并创建一个文件夹在文件夹“src/app/services”中有一些文件。

4

0 回答 0