Angular Schematics条件属性与动态提示配置问题咨询

嘿，这个需求我之前刚好实现过，完全可以通过JSON Schema的条件校验特性来搞定！核心就是用if/then关键字，让bannerTitle和bannerDescription仅在includeBanner为true时才成为必填项并触发交互式提示，当includeBanner为false时，这两个字段既不需要填写，也不会在CLI的提问中出现。

下面是具体的实现步骤和代码示例：

1. 修改你的schema.json配置 #

首先确保你的schema使用的是JSON Schema Draft-07（因为if/then是这个版本引入的特性），然后添加条件校验逻辑：

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "id": "ContainerComponentSchema",
  "title": "Container Component Generator Schema",
  "type": "object",
  "properties": {
    "includeBanner": {
      "type": "boolean",
      "description": "是否包含Banner组件",
      "default": false
    },
    "bannerTitle": {
      "type": "string",
      "description": "Banner标题的默认翻译文本"
    },
    "bannerDescription": {
      "type": "string",
      "description": "Banner描述的默认翻译文本"
    },
    // 这里可以添加你的其他字段，比如组件名称、路径等
    "name": {
      "type": "string",
      "description": "容器组件名称",
      "$default": {
        "$source": "argv",
        "index": 0
      },
      "x-prompt": "请输入容器组件名称："
    }
  },
  // 核心条件判断逻辑
  "if": {
    "properties": {
      "includeBanner": {
        "const": true
      }
    },
    "required": ["includeBanner"]
  },
  "then": {
    "required": ["bannerTitle", "bannerDescription"]
  }
}

2. 代码逻辑解释 #

• if块：判断includeBanner的值是否为true，同时确保includeBanner字段已被设置。
• then块：当if的条件满足时，将bannerTitle和bannerDescription加入必填字段列表，此时Angular CLI会自动触发这两个字段的交互式提示，并且如果用户不填写就会报错。
• 当includeBanner为false（或未设置）时，then块不会生效，这两个字段既不是必填项，也不会出现在CLI的提问流程中。

3. 兼容旧版本CLI的备选方案 #

如果你的Angular CLI版本较旧（不支持Draft-07的if/then），可以用dependencies字段替代，写法如下：

{
  // ... 其他配置不变
  "dependencies": {
    "includeBanner": {
      "properties": {
        "includeBanner": { "const": true }
      },
      "required": ["bannerTitle", "bannerDescription"]
    }
  }
}

不过这种写法的可读性不如if/then，优先推荐前者。

4. 测试验证 #

运行你的schematic命令（比如ng generate your-schematic:container），测试两种场景：

• 选择includeBanner为true：此时会自动弹出bannerTitle和bannerDescription的输入提示，且必须填写才能继续。
• 选择includeBanner为false：完全不会出现这两个字段的提示，直接跳过。

内容的提问来源于stack exchange，提问作者rafcik