修改应用程序提供的 Portlet

您可以定制应用程序提供的 Portlet 并将其替换为定制 Portlet。

开始之前

标识要定制的应用程序提供的 Portlet。应用程序提供的 Portlet 存在于 <store-temp>/packages/features/home/src/app/portlet-set 目录中。您可以创建新的 Portlet 组件，也可以复制和修改应用程序提供的 Portlet。

过程

将相应的应用程序提供的 Portlet 组件文件夹从 <store-temp>/packages/features/home/src/app/portlet-set 目录复制到 <store-temp>/extensions/features/override-component/src/app/components 目录。
在 Portlet 的 component.ts 文件中，更新 Portlet 的组件类名。添加 componentName 变量，并使用组件类名更新 portletname 和 componentName 变量。
通过完成以下步骤更新 Portlet 组件类名:
1. 浏览到 /extensions/features/override-component/src/app/ 目录。
2. 打开 apps.module.ts 文件。
3. 在 customComponentsDeclarations 对象中，更新 Portlet 组件类名。
4. 导入 Portlet 组件类名。
将应用程序提供的 Portlet JSON 配置从 <store-temp>/packages/features/app-shell/src/assets/app-shell/config/isf-persona-config.json 文件复制到 <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json 文件。您可以使用组件类名来标识应用程序提供的 Portlet。此外，添加具有相应值的 extensionType 属性。有关更多信息，请参阅《将新端口与适当视图关联》。
在 JSON 配置中，更新复制到 <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json 文件的 portletComponent 属性中的定制 Portlet 组件类名。

注: 在 JSON 配置中，请勿更改 portletTID 属性。
在 app.module.ts 文件中声明属于应用程序模块的所有组件。
通过运行以下命令来启动应用程序，并验证是否在主页中装入了新 Portlet。
```
yarn start-app
```

下一步

为支持本地化和国际化， i18n 文件夹存在于 <store-temp>/extensions/features/override-component/src/assets/override-component/ 文件夹中。您可以创建特定于语言的捆绑软件 JSON 文件。例如， en.json 表示英语语言环境，并添加特定于语言的定制捆绑条目 JSON 文件，即 en.json 表示英语语言环境。如果要覆盖应用程序提供的 Portlet ，请确保 app-module-ts 中的捆绑软件静态变量包含从主应用程序装入的资产。请参阅以下样本代码片段。
```
class OverrideComponentBundlesModule {
  static bundles: Array<any> = [
    {
      prefix: './assets/override-component/i18n/',
      suffix: '.json'
    },
    {
      prefix: './assets/home/i18n/',
      suffix: '.json'
    }
  ].concat(CommonBundlesModule.bundles);
};
```
有关更多信息，请参阅修改应用程序定义组件的包条目。
您可以使用 StoreRouterService angular 服务浏览到不同的屏幕或角度路径。有关更多信息，请参阅导航至路线。
要验证开发者工具箱中的更改，请抽取并部署定制。有关更多信息，请参阅《提取自定义设置》。