修改应用程序提供的模态

模态对话框用于显示关键信息或请求完成特定用户操作所需的用户输入。用户操作包括取消订单，查看序列，添加或查看订单或订单行的注释等等。

模态对话框类似于弹出屏幕，这将打开一个对话框以在主应用程序内容上显示屏幕。所有模态对话框都显示在父屏幕中。打开模态对话框时，用户无法返回到父屏幕。此外，在模态任务完成或模态对话框关闭之前，将忽略任何用户操作。

您可以根据业务需要定制应用程序提供的模态。

开始之前

应用程序提供的 modals 存在于相应页面组件或屏幕的 modals 目录中，如以下示例中所述:

单击 " 订单摘要 " 屏幕中的取消订单相关任务时，将显示取消订单模态组件。取消订单模态组件存在于 <store-temp>/packages/features/orders/src/app/features/orders/order-summary-page/modals/cancel-order-modal 目录中。
当您要在搬迁库存流的 " 提货 " 页面中将产品数量标记为缺货时，将显示记录缺货模态组件。记录缺货模态组件存在于 <store-temp>/packages/features/move-inventory/src/app/features/move-inventory/move-inventory-wizard-page/modals/record-shortage 目录中。

要覆盖应用程序提供的任何模态，您必须知道该模态的 modalId 。 modalId 用于唯一地标识应用程序提供的模态。因此，它由覆盖-模态命令使用，该命令使您能够定制模态。

modalId 定义为应用程序提供的模态组件类中的变量，如以下示例中所示:

export class OrderTotalModalComponent implements OnInit {
  public static modalId = 'orders.order-total-modal';
  ...
  ...

覆盖应用程序提供的模态时，将在 <store-temp>/extensions/features/override-modals 目录中复制整个模态组件目录。您可以根据业务需要修改复制的模态组件。

注: 当您只想修改模态代码时，请勿复制父屏幕或组件代码。

要使用定制或覆盖模态来映射应用程序提供的模态，请使用 <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/isf-modal-config.json 配置文件。您可以轻松确定被覆盖的应用程序提供的模态以及用于覆盖的定制模态组件。

下表描述了 isf-modal-config.json 文件的模式定义:

表 1. 模式定义属性和说明
属性名称	描述
applicationProvidedModalId	为应用程序提供的模态分配的唯一标识符，其命名约定为`<feature-name>.<parent-page-name>.<modal-name>`。例如， `orders.order-summary-page.cancel-order-modal`。
overrideModalId	分配给命名约定为 `custom-<applicationProvidedModalId>`的被覆盖或定制模态的唯一标识。例如 `custom-orders.order-summary-page.cancel-order-modal`。

过程

转至 <store-temp> 目录，然后运行以下命令:
```
yarn override-modal --application-provided-modal-id=<component-modal-id>
```
例如，
```
yarn override-modal --application-provided-modal-id=functional-components.identify-customer-modal
```
此处， --application-provided-modal-id 是指要修改的应用程序提供的模态组件的模态标识。

您可以通过引用要定制的模态组件的源代码来标识应用程序提供的模态的 modalId 。
该命令完成以下任务:
- 将应用程序提供的模态组件文件夹复制到 <store-temp>/extensions/features/override-modals/src/app/<feature-name>。
  要在单个文件夹中组织属于同一应用程序的 modals ，建议您在 <store-temp>/extensions/features/override-modals/src/app 目录中创建 <feature-name> 文件夹。
- 自动导入组件，并在 <store-temp>/extensions/features/override_modals/src/app 文件夹中存在的 app.module.ts 文件的 customModalsDeclarations 对象中创建该组件的条目。
- 为避免与应用程序提供的 modalIds发生模态名称冲突，该命令通过将 custom- 前缀到现有 modalId (如代码片段中所示) 来更新定制模态组件的 modalId 。
- 要将应用程序提供的 modalId 与定制或覆盖 modalId进行映射，请更新 <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/ 文件夹中存在的 isf-modal-config.json 文件。
  以下代码片段说明了 isf-modal-config.json中的样本条目:
  [ { "applicationProvidedModalId": "orders.order-summary-page.cancel-order-modal", "overrideModalId": "custom-orders.order-summary-page.cancel-order-modal" }]
  注: CLI 命令仅复制组件文件夹中存在的文件。如果扩展组件在组件文件夹外部导入文件，请确保手动将此类文件复制到新模态组件文件夹中的相应位置。此外，请确保在 <store-temp>/extensions/features/override_modals/src/app 文件夹中存在的 app.module.ts 文件中导入和声明。
在定制模态组件中，可以在构造函数中找到专用 _activeModal: NgbActiveModal 。将 NgbActiveModal 服务替换为 StoreWrapperModalService，并确保从 '@store/core'导入 StoreWrapperModalService 。要将模态数据从覆盖模态应用程序传递到开箱即用应用程序，此更改是必需的。

注: 如果应用程序提供的模态将数据发送到父屏幕，那么定制模态还必须将数据发送到父屏幕。请确保保留原始数据模型模式，而不修改类型，也不从数据对象中除去任何属性。
为了支持本地化和国际化， i18n 文件夹存在于 <store-temp>/extensions/features/override-modals/src/assets/override-modals/i18n/ 文件夹中。您可以创建特定于语言的捆绑软件 JSON 文件，并添加特定于语言的定制捆绑软件条目 JSON 文件。例如，对于英语语言环境，创建 en.json 并添加特定于语言的定制捆绑条目 JSON 文件。
要复用覆盖的模态所需的现有应用程序提供的捆绑软件条目，请配置相应功能部件模块的路径，如样本代码片段中所示。

例如，如果覆盖循环计数功能的分配任务模态，那么将循环计数添加到 <store-temp>/extensions/features/override_modals/src/app/app.module.ts中的束数组。
```
static bundles: Array<any> = [
   {
     prefix: './assets/cycle-count/i18n/',
     suffix: '.json'
   },
   {
     prefix: './assets/override-modals/i18n/',
     suffix: '.json'
   }
 ].concat(CommonBundlesModule.bundles);
};
```
注: 在捆绑软件数组中，在末尾添加 './assets/override-modals/i18n/' 。

下一步

要以本地方式验证应用程序提供的扩展屏幕，请通过运行以下命令来启动应用程序，然后浏览到显示模态的屏幕。
```
yarn start-app
```
要验证开发者工具箱中的更改，请抽取并部署定制。有关提取和部署自定义内容的更多信息，请参阅提取自定义内容。