将集合传递到自定义角度示意图？答案

【问题标题】：Pass collection into custom angular schematic?将集合传递到自定义角度示意图？
【发布时间】：2019-06-21 23:06:31
【问题描述】：

我想创建一个可以接受一组动作名称的自定义角度示意图。然后，我将为用户提供的每个操作名称生成 3 个 ngrx 操作。

例如，我想创建一个可以像这样调用的原理图：

ng g my-collection:my-schematic --actions=GetById,GetByFirstName

然后我将为 GetById、GetByIdSuccess、GetByIdError、GetByFirstName、GetByFirstNameSuccess、GetByFirstNameError 生成代码。

问题是我只看到了可以接受单个值作为输入参数的角度示意图。有人知道如何在自定义角度示意图中处理集合吗？

【问题讨论】：

标签： angular-schematics

【解决方案1】：

如果您想直接从命令 args 中提取它们，您可以执行以下操作：

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "$id": "Sample",
  "title": "Sample Schematic",
  "type": "object",
  "description": "Does stuff.",
  "additionalProperties": false,
  "properties": {
    "things": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "$default": {
        "$source": "argv"
      },
      "description": "Things from the command-line args."
    }
  }
}

然后，当您运行原理图时，您可以：

schematics schematic-lib:sample stuff other-stuff more-stuff

在这种情况下，things 属性将为['stuff', 'other-stuff', 'more-stuff']。

编辑：请注意，如果您不提供任何参数，架构中的 required 值不会导致原理图失败。您需要在原理图中对该属性进行验证。

【讨论】：

【解决方案2】：

您需要多次传递actions。

ng g my-collection:my-schematic --actions=GetById --actions=GetByFirstName

将参数定义为schema.json 文件中的数组。

    ...
    "actions": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "The name of the actions."
    },
    ...

也在你的schema.ts中。

export interface Schema {
  actions: string[]
}

【讨论】：

【解决方案3】：

我还没有找到一个很好的例子来说明如何将字符串数组转换为原理图参数，但我找到了一种解决方法。我所做的是有一个始终分隔的简单字符串输入参数（我使用 , 来分隔值）。这是我的架构：

export interface Schema {
  name: string;
  path?: string;
  project?: string;
  spec?: boolean;
  actions: string;
  __actions: string[];
  store?: string;
}

我解析提供的操作参数并生成字符串数组 __actions 并在我的模板中使用该属性。这是我的 index.ts 中的一个 sn-p：

export default function(options: ActionOptions): Rule {
  return (host: Tree, context: SchematicContext) => {
    options.path = getProjectPath(host, options);

    const parsedPath = parseName(options.path, options.name);
    options.name = parsedPath.name;
    options.path = parsedPath.path;
    options.__actions = options.actions.split(',');
    options.__actions = options.__actions.map(_a => classify(_a));

如果您知道处理这些问题的更好方法，请分享。谢谢！

【讨论】：

【解决方案4】：

你可以关注这个博客，它将教你如何创建自己的原理图项目：

https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

在文件collection.json 中生成原理图项目后，您可以扩展@ngrx/schematics：

{
...
"extends": ["@ngrx/schematics"],
}

然后使用ngrx原理图生成3个这样的动作：

externalSchematic('@ngrx/schematics', 'action')

【讨论】：