Angular 原理圖條件屬性/提示

Question

我正在創建自己的原理圖。 這個原理圖將負責用一些代碼創建一個組件（容器）。 此組件的模板將包含一些其他組件。 該組件之一將是可選的橫幅組件。 此橫幅將顯示將被翻譯成其他語言的文本，因此如果橫幅將包含在組件中，我還應該要求用戶提供（默認）翻譯文本。 這是此模板的示例：

名稱@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 並且應該有'如果未提供這些屬性，則不會顯示填充這些屬性的提示。 知道如何實現這一目標嗎？

Answer 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 。