주소 표시 확장

새 주소 표시 템플리트를 추가하려면 다음 프로시저를 사용하십시오.

1. SCREEN_EXTENSIONS_HOME 아래에 다음 폴더 구조를 만듭니다(아직 없는 경우): SCREEN_EXTENSIONS_HOME/app-common/address/address-display
2. address-extension.module.ts 를 <WORKSPACE>/store-frontend/src/app/app-common/address 에서 <WORKSPACE>/store-frontend/store-extensions-src/app/app-common/address 폴더로 복사하십시오.

   사용자 정의 주소 표시 템플리트 컴포넌트 및 제공자가 이 파일에서 선언됩니다.

   address-extension.module.ts 가 이미 있는 경우에는 파일을 복사하지 마십시오.

3. 새 주소 표시 템플리트를 작성하려면 다음 단계를 수행하십시오.
   1. 다음 명령을 실행하십시오.

      ng g c app-common/address/address-display/components/<componentName> 
      --project=store-extensions --skip-import

   2. address-extension.module.ts에서 @NgModule 데코레이터의 선언 및 내보내기 특성에서 주소 표시 템플리트 컴포넌트 클래스 이름을 업데이트하십시오.
4. 주소 표시 구성 (IAddressDisplayConfig) 파일에 새 주소 표시 템플리트를 등록하십시오. store-customization-impl.ts 파일에서 다음 예에 표시된 대로 JSON 스펙으로 extensionAddressConfigList 특성을 업데이트하십시오.

   static extensionAddressConfigList: IAddressConfig[] =  [
             {
                 countryCode: 'US',
                 tid: 'US',
                 displayComponent: USDisplayComponent
             }
   ]

다음 표에는 IAddressDisplayConfig 특성 파일의 특성이 나열되어 있습니다.

테이블 1. 구성 파일 속성 및 설명

특성	설명
countryCode {string}	필수입니다. 주소 표시 템플리트의 유형 및 고유 ID입니다.
tid {string}	필수입니다. 주소 표시 템플리트를 테스트하기 위한 고유 ID입니다.
displayComponent {component}	선택사항. 주소 표시 템플리트에 대해 렌더링할 컴포넌트의 참조입니다.
isDefaultComponent {boolean}	선택사항. 특정 국가 code.If 를 제공하지 않으면 기본적으로 미국이 사용됩니다.

다음 예에 표시된 대로 JSON 스펙을 사용하여 기존 주소 표시 템플리트에 대해 새 사용자 정의 주소 표시 템플리트 컴포넌트 CustomDisplayComponent를 사용할 수 있습니다.

static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              displayComponent: CustomDisplayComponent
          }
] 

주소 표시 템플리트를 기본값으로 설정하기 위한 JSON 스펙은 다음 예에 표시되어 있습니다.

static extensionAddressConfigList: IAddressConfig[] =  [
          {
              countryCode: 'US',
              tid: 'US',
              displayComponent: USDisplayComponent,
              isDefaultComponent: true
          }
]