アプリケーション提供の機能コンポーネントの変更

このアプリケーションは、 @store/functional-components の角度ライブラリーにパッケージされている再使用可能な機能コンポーネントを提供します。これらのコンポーネントは、特定のドメインまたは機能のユース・ケースに対応するために構築されており、アプリケーション全体で広く使用されています。

ビジネスの必要に応じて、アプリケーション提供の機能コンポーネントをカスタマイズしたり、新規カスタム・コンポーネントを作成したりすることができます。

始める前に

アプリケーション提供の機能コンポーネントは、 <store-temp>/packages/libs/functional-components/src/lib フォルダーにあります。これらの各コンポーネントは、特定の機能をカプセル化し、アプリケーション全体で広く使用されています。

アプリケーション提供の機能コンポーネントをカスタム・コンポーネントにマップするには、 <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json ファイルを使用します。 JSON ファイルで、アプリケーション提供のコンポーネントの固有 ID をカスタム・コンポーネントまたはオーバーライドされたコンポーネントにマップしていることを確認してください。

以下の表では、 isf-component-extn-config.json ファイルのスキーマ定義について説明します。

表 1. スキーマ定義の属性と記述
属性名	説明
applicationProvidedComponentId	アプリケーションで提供される機能コンポーネントに割り当てられる固有 ID。例えば、 `MiniCartComponent`のようになります。
overrideComponentId	オーバーライドされたコンポーネントまたはカスタム・コンポーネントに割り当てられた固有 ID。例えば、 `MiniCartCustomComponent`のようになります。

アプリケーション提供の機能コンポーネントをオーバーライドする場合は、表で説明されている属性で <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json を更新します。

手順

以下のいずれかの方法で、アプリケーション提供の機能コンポーネントを変更します。
- 新規カスタム・コンポーネントを作成します。
  1. <store-temp>/extensions/features/override-component/src/app/components ディレクトリーを参照し、以下のコマンドを実行します。
```
ng g c <componentName> --prefix=isf
```
  2. 以下のように、値をコンポーネント・クラス名として持つ componentName 静的ストリング変数を追加します。
    public static componentName = 'MiniCartCustomComponent';
- ビジネスの必要に応じて、アプリケーション提供のコンポーネントをコピーして変更します。
  1. 拡張するアプリケーション提供の機能コンポーネントを識別します。
  2. コンポーネント・ソース・フォルダー全体をコピーし、 <store-temp>/extensions/features/override-component/src/app/components ディレクトリーにコピーします。
カスタム・コンポーネント・クラス名を更新します。
<store-temp>/extensions/features/override-component/src/app ディレクトリーに移動します。 app.module.ts ファイルを開き、 customComponentDeclarations オブジェクト内のカスタム・コンポーネント・クラス名を更新します。

注: 拡張コンポーネントがコンポーネント・フォルダーの外部にファイルをインポートする場合は、そのようなファイルをコンポーネント・フォルダー内の適切な場所に手動でコピーするようにしてください。また、 <store-temp>/extensions/features/override_component/src/app フォルダーにある app.module.ts ファイル内のコンポーネントをインポートして宣言するようにしてください。アプリケーションが他の角度モジュールに依存している場合は、適切なモジュールをインポートします。例えば、 FormsModule、 CommonModule、 ReactiveFormsModuleなどとなります。
<store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json ファイルを適切な詳細情報で更新します。例えば、アプリケーション提供のミニ・カート・コンポーネントをカスタム・ミニ・カート・コンポーネントに置き換えるには、以下のように更新します。
```
[{
   "applicationProvidedComponentId": "MiniCartComponent",
   "overrideComponentId": "MiniCartCustomComponent"
 }]
```

ローカリゼーションおよび国際化対応をサポートするために、 i18n フォルダーは <store-temp>/extensions/features/override-component/src/assets/override-component/i18n/ フォルダーに保持されています。英語用の en.json バンドル・ファイルは、 i18n フォルダーに含まれています。言語固有のバンドル JSON ファイルを作成することもできます。

注:

アプリケーション提供の AddressCaptureComponent または AddressDisplayComponentを変更する場合は、以下の手順を実行します。
1. AddressRegistryService および AddressConfigList を <store-temp>/packages/libs/functional-components/src/lib/address から <store-temp>/extensions/features/override-component/src/app/components/customAddress フォルダーにコピーします。
  ここで、 customAddress は、拡張アドレス表示コンポーネントまたはキャプチャー・コンポーネントを含むフォルダー名を表します。
2. AddressRegistryService および AddressConfigList を app.module.ts ファイルにインポートします。
3. 以下のように、 app.module.ts ファイルのコンストラクターで AddressRegistryService に AddressConfigList を登録します。
```
class AppModule implements OnDestroy, DoBootstrap {
......
   constructor() {
     .....
     AddressRegistryService.registerAddress(AddressConfigList, []);
     .....
   }
.......
}
```
アプリケーション提供の GlobalSearchRegistryServiceを変更する場合は、以下の手順を実行します。
1. <store-temp>/packages/libs/functional-components/src/lib/global-search から <store-temp>/extensions/features/override-component/src/app/components/global-search-extn フォルダーに GlobalSearchRegistryService をコピーします。
  ここで、 global-search-extn は、拡張グローバル検索コンポーネントを含むフォルダー名を表します。
2. GlobalSearchRegistryService を app.module.ts ファイルにインポートします。
3. searchComponentDeclarationsを宣言します。
```
const searchComponentDeclarations = [
     OrderSearchComponent,
     CustomerSearchComponent,
     ProductSearchComponent,
     ShipmentSearchComponent
   ];
```
4. 以下のように、 app.module.ts ファイルのコンストラクターで GlobalSearchRegistryService に searchComponentDeclarations を登録します。
```
GlobalSearchRegistryService.registerSearchComponents(searchComponentDeclarations);
```

次のタスク

拡張アプリケーション提供の機能コンポーネントをローカルで検証するには、以下のコマンドを実行してアプリケーションを開始し、機能コンポーネントが表示されている画面に移動します。
```
yarn start-app
```
デベロッパーズ・ツールキットでの変更を確認するには、カスタマイズを抽出してデプロイします。カスタマイズの抽出と展開に関する詳細については、「カスタマイズの抽出」を参照してください。