角度示意图条件属性/提示答案

【问题标题】：Angular schematics conditional property/prompt角度示意图条件属性/提示
【发布时间】：2019-11-02 07:48:28
【问题描述】：

我正在创建自己的原理图。该原理图将负责使用一些代码创建组件（容器）。该组件的模板将包含一些其他组件。该组件之一将是可选的横幅组件。此横幅将显示将翻译成其他语言的文本，因此如果横幅将包含在组件中，我还应该要求用户提供（默认）翻译文本。这是此模板的示例：

name@dasherize.component.html.template：

<% if (includeBanner) { %>
<app-banner [title]="'<%= translationModuleKey %>.banner.title' | translate"
                           [description]="'<%= translationModuleKey %>.banner.description' | translate">
</app-banner>
<% } %>
<app-other-component>

</app-other-component>

这是我的 schema.json：

{
  "$schema": "http://json-schema.org/schema",
  "id": "MySchematics",
  "title": "My schematics",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the container",
      "x-prompt": "Container name"
    },
    "includeBanner": {
      "type": "boolean",
      "description": "Include banner",
      "default": "true",
      "x-prompt": "Include banner"
    },
    "bannerTitle": {
      "type": "string",
      "description": "Banner title",
      "x-prompt": "Banner title"
    },
    "bannerDescription": {
      "type": "string",
      "description": "Banner description",
      "x-prompt": "Banner description"
    },
    "translationModuleKey": {
      "type": "string",
      "description": "Root key for translations"
    }
  },
  "required": [
    "name", "includeBanner", "bannerTitle", "bannerDescription"
  ]
}

我的问题是，当用户将 includeBanner 设置为 true 时，应该需要字段 bannerTitle 和 bannerDescription，如果没有提供这些属性，则应该显示提示，但如果 includeBanner 为 false，则不需要 bannerTitle 和 bannerDescription如果未提供这些属性，则不应显示填充这些属性的提示。知道如何实现吗？

【问题讨论】：

能否详细说明您的问题？
你找到答案了吗？
面临类似问题

标签： javascript angular typescript angular-schematics

【解决方案1】：

我也在为同样的问题而苦苦挣扎。我发现 - 如果您需要条件提示，那么您不能依赖声明性 schema.json 文件（它不支持条件）。相反，您应该使用来自@angular/cli/utilities/prompt 的askConfirmation 函数。因此，您的示例可能如下所示：

import { askConfirmation } from '@angular/cli/utilities/prompt';

export function yourSchematicsFn(options: Schema): Rule {
    return async (tree: Tree, context: SchematicContext) => {
         const includeBanner = await askConfirmation('Include Banner?', true);
         if(includeBanner) {
              // ask for bannerTitle and bannerDescription
         }
         else {
              // do something else
         }
         return chain(/* chain your rules here */);
    }
}

我在 Angular CLI ng-add 原理图源代码中发现了这一点：askConfirmation。

【讨论】：