使用 Angular 原理图创建组件

在开发人员工具包中，IBM提供了 Angular 原理图，可快速生成带有启动代码的组件，供您在应用程序中使用。 组件包括搜索页面、表格和字段详情。

使用示意图生成与 Order Hub 中现有组件具有相同设计和功能的组件。 生成的组件还包括与各种服务进行通信的必要库，例如
  • Sterling™ Order Management后台。
  • Sterling Intelligent Promising Inventory Visibility 租户。
  • 其他微服务租户。
  • 现有页面中使用的 Carbon UI 库。
有关如何使用示意图创建新应用程序的信息，请参阅 在下一代订单中心创建新应用程序。

准备工作

  1. 提取 下一代订单中心代码。 有关更多信息，请参阅 开始自定义下一代订单中心。
  2. 运行以下命令将 strict-ssl 设置为 false。
    npm config set "strict-ssl" false
  3. 运行以下命令重新安装 @buc/schematics 的最新版本，访问 IBM 提供的原理图。 对于Angular v15 ，请运行以下命令。
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
    对于Angular v18 ，请运行以下命令。
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
  4. 有关示意图脚本的帮助，请运行
    ng g @buc/schematics:<component> --help
  5. 创建组件。

创建搜索页面组件

创建一个 search page 组件，供用户指定搜索条件和搜索数据。

search-panel 原理图创建了搜索页面组件，并包含支持以下功能的代码：
  1. 面包屑线索
  2. 保存搜索功能
  3. 自定义搜索标准功能
  4. 搜索分组
下面的屏幕截图显示了装运搜索页面，并突出显示了搜索页面的功能。
货物搜索页面截图。 面包屑路径周围有一个标有数字 1 的方框。 保存的搜索按钮周围有一个标有 2 的方框。 自定义搜索标准 "按钮周围有一个标有 3 的方框。 按搜索 "分组周围有一个标有 4 的方框。

过程

  1. 打开终端，进入要添加组件的模块。 例如，devtoolkit_docker/orderhub-code/buc-app-order。
  2. 运行以下命令创建组件
    ng g @buc/schematics:search-panel --name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--path <path> \
--json-file-name <json-file-name> \
--project <project-name> \
--skip-import
    参数
    名称
    (必填）组件名称。
    该示意图通过删除特殊字符并添加 "SearchComponent" 字样来创建组件类名。 例如，如果指定名称 my-sample, 则生成的类名称为 MySampleSearchComponent.
    json 文件路径
    (必填）您要更新或创建配置文件（search_fields.json）的路径。例如，packages/order-shared/assets/buc-app-order。
    在 search_fields.json 文件中，示意图通过在名称后添加"-search "来创建对象名称。 例如，my-sample-search.
    翻译文件路径
    (必填）您要更新或创建翻译字面的路径（en.json)。例如，packages/order-shared/assets/buc-app-order/i18n。
    在 en.json 文件中，示意图通过在名称后添加"-search "来创建对象名称。 例如，my-sample-search.
    共享库
    (必填）共享库文件夹的名称。
    路径
    (可选）创建组件文件的路径，相对于当前模块。 默认情况下，会在模块根文件夹中创建一个与组件同名的文件夹。
    json 文件名
    (可选）默认情况下，示意图会使用测试数据更新 search_fields.json。 如果需要将对象更新或添加到不同的文件中，请使用此参数。 如果指定的文件名在 assets 文件夹中不存在，则会创建一个新文件。
    项目
    (必填）创建原理图的软件包文件夹名称。 例如，在 packages/order-search-result 中创建一个搜索结果组件，项目名称将是 order-search-result。
    以下命令提供了一个带参数的示例。
    ng g @buc/schematics:search-panel --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
  3. 原理图创建新组件并更新共享文件。 终端中的输出汇总了创建和更新的文件。

创建搜索结果页面组件

创建一个 search results page 组件，用于在用户从搜索页面组件运行查询后显示结果。

search-result-component 原理图生成两个元件：
  1. 搜索结果组件。
  2. 表格组件（BaseTableComponent 类型），其选择器包含在搜索结果组件模板中。
下面的屏幕截图显示了装运搜索结果页面，并突出显示了结果页面中的功能。
搜索结果页面截图。 方框 1 代表搜索结果部分。 方框 2 代表表格部分。
过程
  1. 打开终端，进入要添加组件的模块。 例如，devtoolkit_docker/orderhub-code/buc-app-order。
  2. 运行以下命令创建搜索结果页面组件。 该示意图为最近路由模块中的搜索结果组件创建了组件并更新了示例路由对象。
    ng g @buc/schematics:search-result-component --name <name> \
--path <resultsPageComponentPath> \
--table-path <tableComponentPath> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--project <project-name> \
--skip-import
    参数
    名称
    (必填）组件名称。
    该示意图通过删除特殊字符并添加 "SearchResultComponent" 表示搜索结果组件，以及 "TableComponent" 表示表格组件来创建组件类名。 例如，如果指定名称 my-sample ，生成的类名称将是 MySampleSearchResultComponent 和 MySampleTableComponent 。
    json 文件路径
    (必填）您要更新或创建配置文件的路径（buc-table-config.json)。
    在 buc-table-config.json 文件中，示意图通过在名称后附加"-table "来创建对象名称。 例如，my-sample-table.
    翻译文件路径
    (必填）要更新或创建翻译字面的路径（en.json）。
    在 en.json 文件中，示意图通过在名称后附加"-table "来创建对象名称。 例如，my-sample-table.
    共享库
    (必填）共享库文件夹的名称。
    路径
    (可选）创建搜索结果组件的路径，相对于当前模块。 默认情况下，会在模块根文件夹中创建一个与组件同名的文件夹。
    表路径
    (可选）创建表格组件的路径，相对于当前模块。 默认情况下，会在模块根文件夹中创建一个与组件同名的文件夹。
    json 文件名
    (可选）默认情况下，示意图会使用测试数据更新 buc-table-config.json。 如果需要将对象更新或添加到不同的文件中，请使用此参数。 如果指定的文件名在 assets 文件夹中不存在，则会创建一个新文件。
    项目
    (必填）创建原理图的软件包文件夹名称。 例如，在 packages/order-search-result 中创建一个搜索结果组件，项目名称将是 order-search-result。
    以下命令提供了一个带参数的示例。
    ng g @buc/schematics:search-result-component --name my-sample --path packages/order-search/src-custom/app/features/search --table-path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
  3. 原理图创建新组件并更新共享文件。 终端中的输出汇总了创建和更新的文件。

创建表格组件

创建一个 table 组件，在表格中显示数据。

table-component 图示支持通过扩展两个表格类中的一个来创建表格组件：
  1. ClientSidePaginationBaseTableComponent: 用于客户端分页，即通过一次 API 调用检索所有表格行条目。
  2. BaseTableComponent: 从 API 获取基于页面的服务器端结果。
下面的屏幕截图显示了 装运搜索结果页面，并突出显示了表格组件。
搜索结果页面截图。 表格组件周围有一个方框。
过程
  1. 打开终端，进入要添加组件的模块。 例如，devtoolkit_docker/orderhub-code/buc-app-order。
  2. 运行以下命令创建表格组件。
    ng g @buc/schematics:table-component --name <name> \
--extend <extendableClassName> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--path <path> \
--project <project-name> \
--skip-import
    参数
    名称
    (必填）组件名称。
    该示意图通过删除特殊字符并添加 "TableComponent" 字样来创建组件类名。 例如，如果指定名称 my-sample, 则生成的类名称为 MySampleTableComponent.
    展开
    (可选）可扩展表格类的名称。 有效值为 ClientSidePaginationBaseTableComponent 或 BaseTableComponent 。 如果您没有在命令中指定值，终端会提示您选择一个组件。 在 Git Bash for Windows 中，extend 参数是强制性的。
    json 文件路径
    (必填）您要更新或创建配置文件的路径（buc-table-config.json)。
    在 buc-table-config.json 文件中，示意图通过在名称后附加"-table "来创建对象名称。 例如，my-sample-table.
    翻译文件路径
    (必填）要更新或创建翻译字面的路径（en.json）。
    在 en.json 文件中，示意图通过在名称后附加"-table "来创建对象名称。 例如，my-sample-table.
    路径
    (可选）创建组件文件的路径，相对于当前模块。 默认情况下，会在模块根文件夹中创建一个与组件同名的文件夹。
    json 文件名
    (可选）默认情况下，示意图会使用测试数据更新 buc-table-config.json。 如果需要将对象更新或添加到不同的文件中，请使用此参数。 如果指定的文件名在 assets 文件夹中不存在，则会创建一个新文件。
    项目
    (必填）创建原理图的软件包文件夹名称。 例如，在 packages/order-search-result 中创建一个搜索结果组件，项目名称将是 order-search-result。
    以下命令提供了一个带参数的示例。
    ng g @buc/schematics:table-component --name my-sample2 --extend ClientSidePaginationBaseTableComponent --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --path packages/order-search/src-custom/app/features/search --project order-search --skip-import
  3. 原理图创建新组件并更新共享文件。 终端中的输出汇总了创建和更新的文件。

作为参考，以下教程将使用Angular原理图创建表格组件： 教程：自定义库存搜索结果页面。

创建字段组件

创建一个 Field 组件，以显示特定记录的详细信息。 例如，订单的订单日期、订单行和发货节点信息。

summary-component 原理图支持创建两种组件：
  1. Field component: 在页面内容区域显示属性。
  2. Summary component: 要在详细信息页面的右侧面板中显示属性。
下面的屏幕截图显示了 装运详情页面，并突出显示了不同的组件。
货件详情页面截图。 方框 1 代表实地部分。 方框 2 代表摘要部分。
过程
  1. 打开终端，进入要添加组件的模块。 例如，devtoolkit_docker/orderhub-code/buc-app-order。
  2. 运行以下命令创建字段组件。
    ng g @buc/schematics:summary-component \
--name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--is-summary-panel <true|false> \
--path <path> \
--project <project-name> \
--skip-import
    参数
    名称
    (必填）组件名称。
    该示意图通过删除特殊字符并添加 "FieldsComponent" 字样来创建组件类名。 例如，如果指定名称 my-sample, 则生成的类名称为 MySampleFieldsComponent.
    json 文件路径
    (必填）您要更新或创建配置文件的路径（buc-field-details.json）。
    在 buc-field-details.json 文件中，示意图通过在名称后附加"-fields "来创建对象名称。 例如，my-sample-field.
    翻译文件路径
    (必填）要更新或创建翻译字面的路径（en.json）。
    在 en.json 文件中，示意图通过在名称后附加"-field "来创建对象名称。 例如，my-sample-field.
    摘要面板
    (可选）布尔值，用于确定要创建的组件类型。 指定 true 以创建摘要组件。 指定 false 以创建字段组件。 缺省值为 true。
    路径
    (可选）创建组件文件的路径，相对于当前模块。 默认情况下，会在模块根文件夹中创建一个与组件同名的文件夹。
    json 文件名
    (可选）默认情况下，示意图会使用测试数据更新 buc-field-details.json。 如果需要将对象更新或添加到不同的文件中，请使用此参数。 如果指定的文件名在 assets 文件夹中不存在，则会创建一个新文件。
    项目
    (必填）创建原理图的软件包文件夹名称。 例如，在 packages/order-search-result 中创建一个搜索结果组件，项目名称将是 order-search-result。
    以下命令提供了一个带参数的示例。
    ng g @buc/schematics:summary-component --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --is-summary-panel true --project order-search --skip-import
  3. 原理图创建新组件并更新共享文件。 终端中的输出汇总了创建和更新的文件。
  4. 如果创建了 字段组件，请编辑生成的 HTML 文件以传递标题参数，为标签页指定一个标签。 例如，如果您查看 屏幕截图，活动选项卡的标签为 "详细信息"。 详细信息 "标签是通过在 en.json 文件中添加包含翻译字面的路径的页眉来指定的：
    [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"